@import '../popup/popup.scss';

.nut-theme-dark {
  .nut-sidenavbar {
    background-color: $dark4;

    &__title {
      background: $dark4;
      color: $white;
    }

    &__content {
      .nut-subsidenavbar__list {
        .nut-subsidenavbar__title {
          background: $dark4;
        }
      }
    }
  }
}

$nutSidenavbarItemHeight: 40px;

.nut-sidenavbar {
  color: #1d1d21;
  font-size: 14px;
  height: 100%;
  overflow: auto;
  display: block;
  background-color: $gray6;

  .arrow-icon {
    position: absolute;
    width: 0;
    height: 0;
    right: 16px;
    top: 18px;
    cursor: pointer;
  }

  .arrow-down {
    border-top: 4px solid #909ca4;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .arrow-up {
    border-bottom: 4px solid #909ca4;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  &__head {
    height: $nutSidenavbarItemHeight;
    background: #eeeff2;
    padding: 10px;
  }

  &__title {
    height: $nutSidenavbarItemHeight;
    padding: 10px 8px 10px 20px;
    background: $gray4;
    color: $gray1;
  }

  &__content {
    position: relative;
    display: block;
  }

  &__list {
    &.nutShow {
      .nut-sidenavbar__content {
        height: auto;
        overflow: inherit;
      }
    }

    &.nutHide {
      .nut-sidenavbar__content {
        height: 0;
        overflow: hidden;
      }
    }
  }

  .border-bt {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background: #eeeff2;
      transform: scale(1, 0.5);
      left: 0;
      bottom: 0;
    }
  }
}
