.Sidebar {
  $this: &;
  background: $color-gray-10;
  position: relative;
  z-index: 2;
  box-shadow: 2px 0px 8px 0px rgba(0, 0, 20, 0.05), 1px 0px 1px 0px rgba(0, 0, 20, 0.1);
  width: 150px;
  height: 100%;
  transition: width 300ms;
  display: flex;
  flex-direction: column;

  &--collapsed {
    width: 72px;
  }

  &__logo {
    height: 56px;
    padding: 6px 11px 1px 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    &__text-icon {
      stroke: transparent;
      height: 30px;
      width: 94px;
    }
    &--collapsed {
      display: block;
      width: 38px;
      height: auto;
      padding-top: 14px;
      margin: 0 auto 10px auto;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    padding: 0 6px;
    margin: 0 8px;
    border-radius: 4px;

    &__text {
      font-size: 14px;
      font-weight: $weight-normal;
      color: $color-white;
    }

    &__subtext {
      color: $color-white;
      display: block;
      font-size: 12px;
      font-weight: $weight-medium;
      letter-spacing: $letter-spacing-loose;
      line-height: 1.1;
      opacity: 0.7;
      text-transform: uppercase;
    }

    &__tooltip {
      cursor: pointer;
    }

    &__icon-container {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }

    &__icon {
      width: 24px;
      height: 24px;
    }

    &:hover {
      background-color: $color-gray-30;
    }

    &:active {
      background-color: $color-gray-50;
    }

    &--active {
      background-color: $color-indigo;
      &:hover {
        background-color: $color-indigo;
      }
    }

    &--disabled {
      opacity: 0.4;
      &:hover {
        cursor: not-allowed;
        background-color: transparent;
      }
    }
  }

  @keyframes expand-text {
    0% {
      display: none;
    }
    99% {
      display: none;
    }
    100% {
      display: unset;
    }
  }

  &__footer {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 10px 0;
    width: 100%;
    gap: 4px;

    &__toggle-collapse {
      cursor: pointer;
      transition: 300ms;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .Sidebar__item__icon-container {
        transition: 300ms;
      }

      &-text {
        color: $color-gray-80;
        animation-name: expand-text;
        animation-duration: 300ms;
      }

      &:active,
      &:focus {
        outline: none;
      }

      &:active,
      &:hover {
        & svg {
          fill: #ffffff;
        }
        color: #ffffff;
      }

      &:hover {
        background-color: $color-gray-30;
      }

      &:active {
        background-color: $color-gray-50;
      }
    }

    &__text {
      text-align: center;
      &__link {
        color: #d299ff;
        font-size: 12px;

        &:hover {
          color: #e9ccff;
        }
      }
    }
  }

  &--collapsed {
    #{$this} {
      &__item {
        width: min-content;
        padding: 0;
        margin: 0 16px;
        border-radius: 4px;
        &__text {
          display: none;
        }
        &__icon-container {
          margin: 0;
        }
      }

      &__footer {
        padding: 0 0 12px 0;
        &__toggle-collapse {
          .Sidebar__item__icon-container {
            transform: rotateZ(180deg);
          }

          &-text {
            animation-direction: reverse;
          }
        }
      }
    }
  }
}