/*@example <aside is="sidebar"></aside>*/
@layer component {
    [is=sidebar] {
        position: relative;
        width: 300px;
        max-width: 30vw;
        padding: var(--space-m);
        background: var(--background-darker-color);
        display: flex;
        flex-direction: column;

        &[has~=horizontal-resizer] {
            max-width: none;
        }

        &[has~=vertical-resizer] {
            max-height: none;
        }

        & > [is=toolbar] {
            margin: -var(--space-m);
            margin-bottom: var(--space-m);
        }

        & > [is=sidebar-header] {
            text-align: right;
            margin-top: calc(var(--space-m) * -1);
            margin-left: calc(var(--space-m) * -1);
            width: calc(100% + var(--space-m) * 2);
            padding: var(--space-s);
        }

        &[has~=top-position],
        &[has~=bottom-position] {
            width: 100%;
            height: 300px;
            max-height: 30vh;
        }

        &[has~=horizontal-resizer],
        &[has~=vertical-resizer] {
            overflow: auto;
        }

        &[has~=horizontal-resizer] > [is=sidebar-resizer][has~=horizontal] {
            position: absolute;
            top: 0;
            bottom: 0;
            width: var(--size-s);
            cursor: ew-resize;
            right: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
                content: "";
                position: absolute;
                top: var(--space-s);
                bottom: var(--space-s);
                left: 50%;
                transform: translateX(-50%);
                width: var(--size-xxxs);
                border-radius: var(--radius-xs, var(--radius-s));
                background: var(--background-more-lighter-color);
                box-shadow: none;
                transition-property: background-color, box-shadow;
                transition-duration: 0.2s, 0.2s;
                transition-timing-function: ease, ease;
                transition-delay: 0s, 0s;
            }

            &:hover::before {
                background: var(--call-to-action-color);
                box-shadow: 0 0 var(--space-m) var(--call-to-action-color);
                transition-delay: 1s, 1s;
            }
        }

        &[has~=horizontal-resizer][has~=right-position] > [is=sidebar-resizer][has~=horizontal] {
            left: 0;
            right: auto;
        }

        &[has~=vertical-resizer] > [is=sidebar-resizer][has~=vertical] {
            position: absolute;
            left: 0;
            right: 0;
            height: var(--size-s);
            cursor: ns-resize;
            bottom: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
                content: "";
                position: absolute;
                left: var(--space-s);
                right: var(--space-s);
                top: 50%;
                transform: translateY(-50%);
                height: var(--size-xxxs);
                border-radius: var(--radius-xs, var(--radius-s));
                background: var(--background-more-lighter-color);
                box-shadow: none;
                transition-property: background-color, box-shadow;
                transition-duration: 0.2s, 0.2s;
                transition-timing-function: ease, ease;
                transition-delay: 0s, 0s;
            }

            &:hover::before {
                background: var(--call-to-action-color);
                box-shadow: 0 0 var(--space-m) var(--call-to-action-color);
                transition-delay: 1s, 1s;
            }
        }

        &[has~=vertical-resizer][has~=bottom-position] > [is=sidebar-resizer][has~=vertical] {
            top: 0;
            bottom: auto;
        }

        &:not([has~=fixed-layout])[now=closed] {
            display: none;
        }

        &[has~=fixed-layout] {
            position: fixed;
            z-index: 1002;
            transition: transform 0.3s;

            &:not([has~=top-position]):not([has~=bottom-position]) {
                top: 0;
                bottom: 0;
                left: 0;
                transform: translateX(-100%);

                &[has~=right-position] {
                    left: auto;
                    right: 0;
                    transform: translateX(100%);
                }

                &[now=closed] {
                    transform: translateX(-100%);
                }

                &[has~=right-position][now=closed] {
                    transform: translateX(100%);
                }

                &[now=opened] {
                    transform: translateX(0);
                }
            }

            &[has~=top-position] {
                left: 0;
                right: 0;
                top: 0;
                height: 300px;
                max-height: 30vh;
                transform: translateY(-100%);

                &[now=closed] {
                    transform: translateY(-100%);
                }

                &[now=opened] {
                    transform: translateY(0);
                }
            }

            &[has~=bottom-position] {
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                height: 300px;
                max-height: 30vh;
                transform: translateY(100%);

                &[now=closed] {
                    transform: translateY(100%);
                }

                &[now=opened] {
                    transform: translateY(0);
                }
            }
        }
    }
}