.panel-collapsible
{
  z-index: 2;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid $border-color-secondary;
  background: $coconut;
  transition: width 0.25s ease-out;

  .toggle-wrapper
  {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;

    .toggle
    {
      width: 30px;
      height: 30px;
      border: 0;
      padding: 0;
      background: $coconut;
      color: $accent-color-primary;
      font-weight: $font-weight-semi-bold;
      font-size: $font-size-lg;

      &:hover
      {
        color: $accent-color-primary-hover;
      }

      &::after
      {
        content: $icon-close;
        font-family: $font-family-icon;
      }
    }
  }

  &.right
  {
    border-right: 0;
    border-left: 1px solid $border-color-secondary;
  }

  &.collapsed
  {
    width: 30px;

    .toggle
    {
      border-bottom: 1px solid $border-color-secondary;
      background: $ice;

      &:hover
      {
        border: 0;
        background: $accent-color-primary-hover;
        color: $coconut;
      }

      &::after
      {
        content: $icon-menu;
      }

      &.icon-search::after
      {
        content: $icon-search;
      }
    }

    :not(.toggle-wrapper):not(.toggle)
    {
      display: none;
    }
  }
}