/**
 * @module header.scss
 * @description styles for header
 * */

.container_max {
  width: 100%;
  max-width: 100%;
  margin: 0px;
}

.navbar-dark {
  background-color: $color-main;
  background: linear-gradient(135deg, $color-main 0%, $color-main-masked 100%);
  color: $color-white;
  box-shadow: 0px 0px 10px 1px #5f7078;

  .tbc-logo {
    background-image: url("TBC_website_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    &:hover {
      opacity: 0.8;
    }
    &.withSearch {
      width: 110px;
      height: 69px;
    }
    &.woSearch {
      width: 75px;
      height: 45px;
    }
  }

  button:focus {
    outline: none;
  }

  .nav-item {
    span.far,
    span.fas {
      margin-top: -2px;
      margin-right: 5px;
      padding-right: 5px;
    }
    a {
      &:hover {
        text-decoration: none;
      }
      .nav-link {
        color: $color-white !important;
        &:hover {
          opacity: 0.7;
        }
      }
      &.active {
        .nav-link {
          background-color: $color-info;
          background: linear-gradient(
            135deg,
            $color-info 0%,
            $color-info-masked 100%
          );
          span {
            color: $color-info-text;
          }
          &:hover {
            opacity: 1;
          }
          &.withSearch {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
          font-weight: bold;
        }
      }
    }
  }

  .nav-icons {
    float: right;
  }

  .btn-support {
    color: $color-white !important;
    font-size: 0.75rem !important;
    text-transform: capitalize !important;
    min-width: 25px !important;
    span {
      margin-right: 0 !important;
    }
    &:hover {
      opacity: 0.7;
    }
  }
}

.btn {
  &.btn-white {
    background-color: $color-white !important;
    background: linear-gradient(
      135deg,
      $color-white 0%,
      $color-white-masked 100%
    );
    color: $color-main !important;
    &:hover {
      color: $color-main-masked !important;
    }
  }
}