/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2017, 2019. All Rights Reserved.
 *
 * Note to U.S. Government Users Restricted Rights:
 * Use, duplication or disclosure restricted by GSA ADP Schedule
 * Contract with IBM Corp.
 * Copyright (c) 2020 Red Hat, Inc.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';

.secondary-header {
  .header-box-shadow {
    position: fixed;
    width: 100%;
    height: 66px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.05);
    z-index: 900;

    &--tall {
      @extend .header-box-shadow;
      height: 15px;
      top: 152px;
    }
  }

  .bx--detail-page-header-title {
    display: inline-block;
    font-size: 1.75rem;
  }

  &-links {
    position: fixed;
    right: 5%;
    top: 7.25rem;
    display: flex;
    z-index: 6001;
    top: 7rem;

    .bx--btn--primary,
    .bx--btn--secondary {
      min-height: 1.875rem;
    }

    .portal {
      padding-left: 1rem;
    }
  }

  header {
    .bx--breadcrumb {
      min-height: 15px;
      padding-top: 10px;
    }

    .breadcrumb-item:last-child {
      &:after {
        display: none;
      }
    }

    .bx--detail-page-header-content {
      width: 100%;

      .bx--detail-page-header-icon-container {
        display: none;
      }

      .bx--detail-page-header-status-container {
        display: inline-block;
        z-index: 6002;

        .bx--detail-page-header-status-icon {
          display: none;
        }

        .bx--detail-page-header-status-text {
          display: flex;
        }
      }

      .bx--detail-page-header-title-container {
        min-height: 66px;
        display: flex;
        align-items: center;
      }
    }
  }

  .secondary-header-actions {
    .bx--btn {
      width: unset;
      min-width: 108px;
    }
  }

  &.simple-header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    height: $secondary-header-min-height;
    padding: 0.75rem 5% 0;
  }

  .bx--detail-page-header--with-tabs {
    top: unset;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 1001;
    min-height: $secondary-header-min-height;
    background-color: #fff;
    padding: .75rem 3% 0;
    left: 0;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .bx--detail-page-header--with-tabs {
      padding: 0 5% 0;
      //height: 90px;
    }
  }

  &.detailed-header-override {
    .bx--detail-page-header--with-tabs[data-header-active="false"] {
      height: 90px;
    }
  }

  &-actions {
    position: fixed;
    float: right;
    top: 7rem;
    right: 5%;
    z-index: 6001;

    .bx--btn {
      width: 108px;
    }
  }

  .bx--tabs__nav {
    bottom: 0;

    &.bx--tabs__nav--hidden {
      padding-left: calc(5vw);
      margin-left: unset;
    }
  }

  .bx--tabs {
    min-height: 40px;

    &.cluster-tabs {
      top: 65px;
      background-color: $color__white;
      height: 40px;
      width: 100%;

      &--long {
        @extend .cluster-tabs;
        top: 90px;
      }
    }
  }

  .tab-container {
    display: flex;

    .main-button-container {
      top: 65px;
      background-color: #fff;
      vertical-align: bottom;
      padding-top: 3px;
      padding-right: calc(5vw);
      position: relative;

      &.with-breadcrumbs {
        top: 90px;
      }
    }
  }
}

.secondary-header-links .bx--btn--primary:focus {
  // box-shadow: 0 0 0 $grc_focus_shaldow_width $grc_focus_shaldow_color;
  outline: 0.0625rem solid transparent;
  border: none;
}

.secondary-header-wrapper {
  position: relative;
  width: 100%;
  z-index: 1000;
}

.secondary-header-wrapper-min {
  @extend .secondary-header-wrapper;
  height: $secondary-header-min-wrapper;
}

.secondary-header-wrapper.with-breadcrumbs {
  @extend .secondary-header-wrapper;
  height: $secondary-header-min-wrapper;
}

.secondary-header-wrapper.with-tabs {
  @extend .secondary-header-wrapper;
  height: $secondary-header-med-wrapper;
}

.secondary-header-wrapper.with-tabs.with-breadcrumbs {
  @extend .secondary-header-wrapper;
  height: $secondary-header-max-wrapper;
}

.secondary-header-tooltip-icon {
  margin-left: 1rem;
}

.secondary-header-tooltip {
  transform: translateY(0.5rem);

  .secondary-header-tooltip-content,
  .secondary-header-tooltip-link {
    display: block;
    padding: 0.5rem;
  }
}
 