/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 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 {

  .detail-page-header-title-button {
    color: $color__blue-51;
    p {
      border-left: 0.125rem solid $color__gray-1;
      height: 2rem;
      margin: 2rem 0 0 2rem;
      font-weight: bold;
      font-size: 0.875rem;
      padding: 0.3rem 0 0 1.5rem;
      &:hover {
        cursor: pointer;
      }
    }
  }

  &-links {
    position: fixed;
    right: 5%;
    top: 8rem;
    display: flex;

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

    .portal {
      padding-left: 1rem;
    }

  }

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

    .bx--detail-page-header-content {
      margin-bottom: 1rem;

      .bx--tabs__nav {
        margin-left: 0;
        margin-top: .25rem;

        .bx--tabs__nav-item {
          padding: 1rem 0;

          .bx--tabs__nav-link:focus, .bx--tabs__nav-link:active {
            box-shadow: 0 0 0 $grc_focus_shaldow_width $grc_focus_shaldow_color;
            outline: 0.0625rem solid transparent;
            border: none;
          }
        }
      }
    }

    .bx--breadcrumb {
      min-height: 0.9375rem;
      padding-bottom: 0;
      margin-bottom: .375rem;

      .bx--link:focus {
        box-shadow: 0 0 0 $grc_focus_shaldow_width $grc_focus_shaldow_color;
        outline: 0.0625rem solid transparent;
        border: none;
      }
    }

    .breadcrumb-item:last-child {
      &:after {
        display: none;
      }
    }
    .bx--detail-page-header-icon-container,
    .bx--detail-page-header-status-container {
      display: none;
    }

    .bx--detail-page-header-title-container {
      display: flex;

      &.no-breadcrumb {
        margin-top: 1.5rem;
      }

      .info-icon {
        margin-left: 0.7rem;
        margin-top: 0.7rem;
        width: 1rem;
        height: 1rem;
        fill: $color__blue-51;
        stroke: none;
        cursor: pointer;
      }

      .bx--tooltip--icon__top:after, .bx--tooltip--icon__bottom:after {
        white-space: normal;
        word-break: keep-all;
        width: 22rem;
        max-width: 22rem;
        transform: translate(-0.625rem, calc(100% + 0.625rem));
        z-index: 2000;
      }

    }
  }

  &.simple-header {
    position: fixed;
    width: 100%;
    height: inherit;
    // top: $secondary-header-top;
    background-color: $color__white;
    padding: 0.75rem 5% 0;
    // padding: 0.75rem 5% 0;
    &-with-shadow{
      @extend .simple-header;
      box-shadow: 0 0.1875rem 0.5rem 0 rgba(0,0,0,0.05);

      .bx--detail-page-header-title-container {
          &.no-breadcrumb {
          margin-top: .5rem;
        }
      }

      & .bx--tabs {
        visibility: hidden;
      }

      & ~ .secondary-header-links {
        visibility: hidden;
      }

      &.special-layout {
        header {
          margin-top: 1.5rem;
        }
  
        .bx--detail-page-header-title {
          margin: 1rem 0 -1rem 0;
        }
      }
    }
    &.special-layout {
      header {
        margin-top: 1.5rem;
      }

      .bx--detail-page-header-title {
        margin: 1rem 0 -1rem 0;
      }
    }
  }

  .bx--detail-page-header--with-tabs {
    top: 3.082rem;
  }

  .auto-refresh-selection {
    display: flex;
    align-items: center;
    padding-right: 0.625rem;

    > div {
      outline: none;
    }

    .button-icon {
      width: 0.75rem;
      height: 0.75rem;
      fill: $color__blue-51;
      stroke: none;
      cursor: pointer;
    }

    .bx--select-input {
      color: $color__blue-51;
      font-size: 0.875rem;
      height: 1rem;
      width: 9.375rem;
      font-weight: bold;
      padding: 0 0.25rem;
      background-color: $color__white;
      box-shadow: none;
    }

    .bx--select__arrow {
      right: 0;
      top: 0.25rem;
    }
  }

  .refresh-time-container {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    height: 1.25rem;
    margin-right: 0.625rem;

    .bx--loading--small {
      width: 1rem;
      height: 1rem;
      margin: -0.125rem 0;
    }
  }
}
.secondary-header-grc-overview{
  .bx--tooltip--icon__bottom:focus {
    box-shadow: none;
    outline: none;
    border: none;
    .info-icon {
      box-shadow: 0 0 0 $grc_focus_shaldow_width $grc_focus_shaldow_color;
      outline: 0.0625rem solid transparent;
      border: none;
    }
  }
}
.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%;
  height: $secondary-header-max-height;
  z-index: 1000;

  &.no-tabs {
    height: calc(#{$secondary-header-max-height} - 1rem);

    &.no-buttons {
      height: calc(#{$secondary-header-max-height} - 2.25rem);
    }
  }

  &.scrolled {
    height: calc(#{$secondary-header-min-height} + 1rem);

    &.no-breadcrumb {
      height: $secondary-header-min-height;
    }
  }
}

@media screen and (max-width: 48rem) {
  nav.bx--tabs {
     position: absolute;
     top: 4.375rem;
     width: 18.75rem;
  }
}
