@use 'src/styles/abstracts' as *;

.Sidebar {
  width: 75px;
  max-width: 75px;
  position: relative;
  z-index: 10;
  .MuiDrawer-paperAnchorDockedLeft {
    border-right: unset;
  }
  .MuiDrawer-paper {
    top: unset;
  }
  &__Paper {
    background-color: #1d2253;
    width: 75.6px;
    overflow: hidden;
  }
  &__List {
    flex: 1 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &__container {
      overflow: hidden auto;
    }
    &__item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80px;
      padding: 0.5rem;
      img {
        width: 2.25rem;
        margin: auto;
      }
      &--icon {
        color: #fff;
      }
      &--text {
        margin-top: 6px;
        font-size: 0.7rem;
        font-style: normal;
        font-weight: $font-500;
        color: #fff;
      }
    }
  }
  &__NavLink {
    position: relative;
    text-decoration: none;
    &--active {
      display: block;
      &:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0px;
        height: 40px;
        width: 3px;
        background-color: #ffff;
        border-radius: 0 0.375rem 0.375rem 0;
      }
    }
  }
  &__bottom {
    padding-top: $space-xxxs;
    position: relative;
    padding-bottom: $space-md;
    display: flex;
    flex-direction: column;
    &__anchor {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $text-xxl;
      text-align: center;
      color: $pico-20;
      text-decoration: none;
      height: toRem(44px);
      transition: color 0.18s ease-out;
      &:hover {
        color: $white;
        svg {
          fill: $white;
        }
      }
    }
    &::before {
      content: '';
      width: toRem(40px);
      left: calc(50% - 1.25rem);
      border-top: 1px solid $pico-70;
      position: absolute;
      top: 0;
    }
    & > span {
      text-align: center;
      margin-top: $space-xs;
    }
  }
}
