$expanding-aside-width: 450px;

.expanding {
  &-aside-layout {
    display: flex;
  }

  &-aside {
    width: $expanding-aside-width;
    position: relative;
    transition: transform 0.2s ease;
    background: palette(gray, xx-light);
    z-index: 2;
    transform: none;

    &__content {
      transition: opacity 0.2s ease;
    }

    &.is-collapsed {
      transform: translate3d(-100%, 0, 0);

      .expanding-aside__content {
        opacity: 0;
      }
    }

    &__toggle-btn {
      position: absolute;
      top: 1em;
      right: -2.15em;
      border-radius: 0;
      z-index: $zIndex-9;

      .icon {
        stroke: palette(gray);
      }

      &--collapsed {
        .icon {
          transform: rotate(180deg);
        }
      }
    }
  }

  &-main {
    background: palette(gray, x-light);
    z-index: 1;
    flex: 1;

    &__content {
      transition: padding-right 0.2s ease, transform 0.2s ease;
    }
  }
}