@use 'sass:color';
@use '../styles/variables' as v;

$transition-time: 0.3s;
$item-padding: 16px;

.base {
  margin-top: v.$gutter * 2;
  position: relative;
}

.itemBase {
  position: relative;
  display: block;

  > a {
    position: relative;
    text-decoration: none;
    display: block;
    color: #b8c7ce;
    padding: $item-padding $item-padding $item-padding $item-padding + 6px;
  }

  &:hover,
  &.current {
    background: #1e282c;

    > a {
      color: white;
    }
  }

  &.current {
    > a {
      &:before {
        width: 6px;
      }
    }
  }
}

.groupBase {
  display: block;
  background: #2c3b41;

  .items {
    transition: height $transition-time;
    overflow: hidden;
  }

  .itemBase {
    > a {
      color: #8aa4af;
      padding: $item-padding $item-padding $item-padding $item-padding + 6px;
    }

    &:hover,
    &.current {
      > a {
        background: color.adjust(#2c3b41, $lightness: 5%);
        color: white;
      }
    }
  }

  &:not(.visible) > .items {
    height: 0 !important;
  }
}

.groupTop {
  align-items: center;
  background: v.$aside-bg;
  display: flex;
  justify-content: space-between;
  padding: $item-padding $item-padding $item-padding $item-padding + 6px;
  position: relative;
  color: #b8c7ce;

  &:hover,
  .visible &,
  .current & {
    background: #1e282c;
    cursor: pointer;
    color: white;
  }

  .current &:before {
    width: 6px;
  }
}

.groupTop,
.itemBase > a {
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: v.$color-blue;
    transition: width $transition-time;
  }
}

.groupTitle {
  display: block;
}

.groupIcon {
  &:before {
    display: block;
    content: '+';

    .visible &,
    .current & {
      content: '-';
    }
  }
}