@use './src/styles/vendor/variables' as vv;

/* --------------------------------------------------
   MAIN NAVBAR STYLE
--------------------------------------------------- */

.cd-navbar-main {
  height: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------
    NAVBAR STYLE
--------------------------------------------------- */

.navbar-brand,
.navbar-brand:hover {
  color: vv.$gray-200;
  height: auto;
  padding: 0;
}

.navbar-brand > img {
  height: 25px;
}

cds-header-item {
  width: 500px;
}

.cluster-switcher {
  margin-left: 6rem;
}

::ng-deep .cds--header__menu-title[aria-expanded='true'] + .cds--header__menu {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
}

::ng-deep cd-navigation .cd-navbar-top {
  .cd-navbar-brand {
    background: vv.$secondary;
    border-top: 4px solid vv.$primary;

    .navbar-brand,
    .navbar-brand:hover {
      color: vv.$gray-200;
      height: auto;
      padding: 0;
    }

    .navbar-brand > img {
      height: 25px;
    }

    .navbar-toggler {
      border: 0;

      &:focus,
      &:hover {
        outline: 0;
      }

      .fa-navicon {
        color: vv.$gray-200;
      }
    }

    .navbar-collapse {
      padding: 0;
    }

    .cd-navbar-utility > .active > a {
      background-color: vv.$primary;
      color: vv.$gray-200;
    }

    .cd-navbar-utility > li > .open > a,
    .cd-navbar-utility > li > .open > a:focus,
    .cd-navbar-utility > li > .open > a:hover {
      background-color: transparent;
      border-color: transparent;
      color: vv.$gray-200;
    }
  }

  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
  .navbar-nav > li > .cd-navbar > a,
  .navbar-nav > li > a {
    color: vv.$gray-200;
    display: block;
    line-height: 1;
    padding: 13.5px 18px !important;
    position: relative;
    text-decoration: none;
  }

  .navbar-nav .nav-link,
  .navbar-nav .nav-link:hover {
    color: vv.$gray-200;
  }

  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
  .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a,
  .navbar-nav > li > .cd-navbar > a:hover,
  .navbar-nav > li > a:hover,
  .navbar-nav > li:hover {
    background-color: vv.$primary;
  }

  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover,
  .navbar-nav > .open > .cd-navbar > a,
  .navbar-nav > .open > .cd-navbar > a:focus,
  .navbar-nav > .open > .cd-navbar > a:hover,
  .navbar-nav > .open > .cd-navbar > li > a:focus,
  .navbar-nav > .open > a,
  .navbar-nav > .open > a:focus,
  .navbar-nav > .open > a:hover {
    background-color: transparent;
    border-color: transparent;
    color: vv.$gray-200;
  }

  .no-hover:hover {
    background-color: vv.$secondary !important;
  }

  @media (min-width: vv.$screen-md-min) {
    .cd-navbar-utility {
      border-bottom: 0;
      font-size: 1.1rem;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  @media (max-width: vv.$screen-sm-max) {
    .navbar-nav {
      margin: 0;

      .fa {
        margin-right: 0.5em;
      }

      .open .dropdown-menu {
        background-color: vv.$primary;
        border: 0;
        padding-bottom: 0;
        padding-top: 0;
      }

      .open .dropdown-menu > li > a {
        color: vv.$gray-200;
        padding: 5px 15px 5px 35px;
      }

      .open .dropdown-menu > .active > a {
        background-color: vv.$primary;
      }
    }

    .navbar-nav > li > a:hover {
      background-color: vv.$primary;
    }
  }

  .cd-context-bar {
    background-color: vv.$white;
    color: vv.$secondary;
    cursor: pointer;
  }

  .dropdown-text {
    font-size: small;
    font-weight: 600;
  }
}

/* ---------------------------------------------------
    SIDEBAR STYLE
--------------------------------------------------- */

$sidebar-width: 16rem;

.wrapper {
  display: flex;
  height: 100%;
  width: 100%;

  #sidebar {
    bottom: 0;
    height: auto;
    left: 0;
    overflow-y: auto;
    position: relative;
    transition: all 0.3s;
    width: $sidebar-width;
    z-index: 999;

    &.active {
      margin-left: -$sidebar-width;
    }
  }
}

/* ---------------------------------------------------
    CONTENT STYLE
--------------------------------------------------- */

#content {
  bottom: 0;
  position: relative;
  right: 0;
  transition: all 0.3s;
  width: calc(100% - #{$sidebar-width});

  &.active {
    width: 100vw;
  }
}
