.aw-toggle-show-aside {
    transition: width 300ms ease-in-out 0s;
    position: relative;
    z-index: 29;

    &--hide {
        width: 1rem !important;
        background: var(--c-surface);

        .aw-toggle-show-aside__btn-wrapper {
            width: 1rem;

            opacity: 1;
        }
    }

    &--shadow {
        box-shadow: 0 0 4px rgb(0 0 0 / 20%);
    }

    .aw-toggle-show-aside__btn-wrapper {
        width: inherit;
        position: fixed;
        top: 0;
        z-index: 29;

        transition: 300ms opacity;
    }

    &:where(:not(&--hide)) &__btn-wrapper {
        opacity: 0;
    }

    &:hover &__btn-wrapper {
        opacity: 1;
    }

    &__arrow-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 2rem;
        right: 0;
        z-index: 29;

        width: 1.5rem;
        height: 1.5rem;
        padding: 0.25rem;

        background: var(--c-surface);
        border: 1px solid var(--c-mono-800);
        border-radius: 2rem;

        color: var(--c-mono-500);
        transition: 100ms background-color, 100ms border-color, 100ms color;
        transform: translateX(50%);

        &:hover {
            background: var(--c-on-surface);
            border: 1px solid var(--c-on-surface);
            color: var(--c-surface);
        }

        &-icon {
            flex: none;
            transition: 300ms transform;

            &--reverse {
                transform: rotate(180deg);
            }
        }
    }

    &--reverse {
        .aw-toggle-show-aside {
            &__btn-wrapper {
                width: 0;
            }
        }
    }
}