@import '../constants/dimensions';
@import '../constants/colors';

.sidebar {
  height: 100%;
  width: $sidebar-width;
  flex-shrink: 0;

  .sidebar__scroll {
    overflow-y: auto;
    height: 100%;
  }

  .sidebar__item__row {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    color: inherit;
    height: $line-height-xs;

    &.sidebar__item__row--heading {
      height: $line-height-sm;
    }

    &:hover {
      background-color: $hl-xxs;
    }

    & > button {
      color: inherit;
      height: 100%;
      width: 100%;
    }
  }

  .sidebar__item__btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    color: $hl-xl;

    & > button,
    & > .dropdown > button {
      display: none;
      padding: 0 $padding-sm;
      height: 100%;
      color: inherit;

      &:hover {
        color: $font-dark-bg;
      }
    }
  }

  .sidebar__item {
    color: $hl;
    box-sizing: border-box;
    width: 100%;
    position: relative;

    .tag {
      padding-left: 0;
    }

    &.sidebar__item--active {
      color: $font-dark-bg;

      .tag {
        opacity: 1;
      }
    }

    &.sidebar__item--right-menu {
      padding-right: 0;
    }

    &:hover .sidebar__item__btn > button,
    &:hover .sidebar__item__btn > .dropdown > button {
      display: block;
    }

    &.sidebar__item--bordered {
      border-top: 1px solid $hl-sm;
    }

    .tag {
      opacity: 0.4;
      width: 4em;
      margin-right: 0;
      text-align: left;
    }
  }

  // This removes the border on the first request group if there are no requests above it
  .sidebar__request-list li:first-child .sidebar__item--bordered {
    border-top: 0;
  }

  ul .sidebar__item__row > button {
    padding-left: $padding-md !important;
  }

  ul ul .sidebar__item__row > button {
    padding-left: $padding-md * 2 !important;
  }

  ul ul ul .sidebar__item__row > button {
    padding-left: $padding-md * 3 !important;
  }
}