/*! DEPRECATED COMPONENT. Will be removed next major version */

@import "../variables/variables";
@import "../mixins/private/dialog-mixins";
@import "../mixins/private/token-mixins";

.drawer-dialog[role="dialog"] {
    @include dialog-base();

    align-items: flex-end;
    overflow: hidden;
}

.drawer-dialog--no-mask[role="dialog"] {
    background-color: transparent;
}

.drawer-dialog__header {
    @include dialog-header-content(var(--spacing-250));
}

.drawer-dialog__header .fake-link {
    align-self: flex-start;
    text-decoration: none;
}

.drawer-dialog__handle {
    background-color: transparent;
    border: none;
    left: 0;
    margin: -11px auto;
    padding: 8px;
    position: relative;
    right: 0;
    top: 11px;
    z-index: 2;
}

/* Added :after class in order to increase parent hit box */
.drawer-dialog__handle::after {
    @include background-color-token(dialog-handle-color, color-stroke-default);

    border-radius: 3px;
    content: "";
    display: block;
    height: 2px;
    width: 24px;
}

.drawer-dialog__main {
    @include dialog-body-content();

    min-height: auto;
    overflow: auto;
}

.drawer-dialog__footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 16px;
    position: relative;
    > * {
        flex: 1;
    }

    & > :not(:first-child) {
        margin-left: 8px;
    }
}

/* inherits from .icon-btn */
/* Added icon button selector so it doesn't override fake-link */
button.icon-btn.drawer-dialog__close {
    align-self: flex-start;
    border: 0;
    height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px;
    z-index: 1;
}

.drawer-dialog__window {
    @include dialog-window();

    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
    max-height: 50%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}

.drawer-dialog__window--expanded {
    height: 95%;
    max-height: 95%;
}

.drawer-dialog__window--slide {
    transition: max-height 0.32s ease-out;
}

.drawer-dialog--show,
.drawer-dialog--hide {
    /* Root animations. */
    &.drawer-dialog--mask-fade {
        transition: background-color 0.16s ease-out;
    }

    &.drawer-dialog--mask-fade-slow {
        transition: background-color 0.32s ease-out;
    }

    /* Child animations. */
    .drawer-dialog__window--fade {
        transition: opacity 0.16s ease-out;
    }

    .drawer-dialog__window--slide {
        transition: transform 0.32s ease-out;
    }
}

/* Apply hide animation. */
.drawer-dialog--hide,
.drawer-dialog--show-init {
    &drawer-dialog--hide,
    &.drawer-dialog--show-init {
        display: flex;
    }

    /* Root animations. */
    &.drawer-dialog--mask-fade,
    &.drawer-dialog--mask-fade-slow {
        background-color: var(--dialog-scrim-color-hide);
    }

    /* code smell, chained modifier */
    .drawer-dialog__window--slide {
        transform: translateY(100%);
    }
}

/* Apply show animation. */
.drawer-dialog--show,
.drawer-dialog--hide-init {
    &.drawer-dialog--show,
    &.drawer-dialog--hide-init {
        display: flex;
    }

    /* Root animations. */
    &.drawer-dialog--mask-fade,
    &.drawer-dialog--mask-fade-slow {
        background-color: var(--dialog-scrim-color-show);
    }

    /* Child animations. */
    .drawer-dialog__window--fade {
        opacity: 1;
    }

    .drawer-dialog__window--slide {
        transform: translateX(0);
    }
}

.drawer-dialog__handle:focus:not(:focus-visible) {
    outline: none;
}
