@use "@carbon/grid" as cg;
@import "../../styles/variables";


.sidebar {
  display: block;
  z-index: 101;
  overflow-x: hidden;
  overflow-y: auto;
  width: $sidebar-width;
  height: 100%;
  background-color: $chef-white;
  border-right: 1px solid $chef-grey;

  @include cg.breakpoint-down(lg) {
    width: $sidebar-small-width;
  }

  chef-tooltip {
    display: none;
    transition-duration: 0.1s;

    @include cg.breakpoint-down(lg) {
      display: block;
    }
  }

  .sidebar-selector {

    ::ng-deep .select-items {

      // required 40px gap to sidebar-nav is: padding-bottom + 8 (sidebar-nav[top]) + 8 (sidebar-nav.a[top])
      padding-bottom: 24px;

      & > .sub-sidebar-button {
        display: block;
        width: 100%;
        text-align: left;
        background-color: $chef-primary-bright;
        border: 0;
        border-bottom: 1px solid lighten($chef-primary-bright, 15%);
        cursor: pointer;

        // yields required 45px height
        padding-top: 11px;
        padding-bottom: 11px;

        // keep the same as sidebar-nav
        padding-left: 14px;
        padding-right: 14px;

        &:hover, &.selected {
          background-color: $chef-primary-light;

          .arrow {
            display: inline;
          }
        }
      }

      a {
        color: $chef-white;
        text-decoration: none;
        font-size: 14px;
        overflow: hidden;
      }

      .arrow {
        display: none;
        margin-top: 4px;
        float: right;
        font-size: 14px;
      }
    }
  }

  .sidebar-nav {

    ::ng-deep .nav-items {

      // required 16px between children AND 16px at the top, so this works in
      // conjunction with a.padding-top
      padding-top: 8px;

      a {
        display: block;
        color: $chef-primary-dark;
        text-decoration: none;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;

        // yields required 16px gap between elements
        padding-top: 8px;
        padding-bottom: 8px;

        // keep the same as sidebar-selector
        padding-left: 14px;
        padding-right: 14px;

        &:hover, &.active {
          color: $chef-primary-bright;

          .arrow {
            display: inline;
            margin-right: -3px;
          }
        }

        &:hover .chef-servers-icon, &.active .chef-servers-icon {
          border-color: $chef-primary-bright;
        }

        &:hover .chef-servers-icon:before, &.active .chef-servers-icon:before {
          color: $chef-primary-bright;
        }

      }

      .sidebar-icon {
        font-size: 16px;
        margin-right: 4px;
        vertical-align: -2px;
      }

      .arrow,
      .open-in-new {
        display: none;
        margin-top: 4px;
        float: right;
        font-size: 14px;
      }

      .open-in-new {
        display: inline;
        margin-right: -3px;
      }

      .group {
        margin-top: 8px;
        padding-left: 14px;
        text-transform: uppercase;
        font-size: 12px;
        color: #6F7878;
      }

      @include cg.breakpoint-down(lg) {
        .menu-item-groups:not(:last-child) {
          border-bottom: 1px solid $chef-grey;
        }

        .group,
        .text {
          display: none;
        }
      }
    }
  }
}
