/* The root aside element takes up the whole screen. */
/* It is hidden by default. */
/* It animates to being closed, and then moves off screen. */
/* It sits over all background content. */
.dialog-module__root {
    transform: translate3d(-50%, 0, 0);
    transition: opacity 192ms var(--venia-global-anim-out),
        visibility 192ms var(--venia-global-anim-out), left 0s 192ms;

    /* TODO @TW: review (B6) */
    /* composes: invisible from global; */
    visibility: hidden;
}

.dialog-module__root_open {

    /* TODO @TW: review (B6) */
    /* composes: visible from global; */
    visibility: visible;

    /* It animates to being open. */
    transition: opacity 224ms var(--venia-global-anim-in),
        visibility 224ms var(--venia-global-anim-in), left 0s;
}

/* The form fills the entire aside. */
/* Its contents are centered horizontally and vertically. */
.dialog-module__form {
}

.dialog-module__mask {
    /* The mask takes up the entire screen. */

    /* The mask is a semi-transparent grey. */
}

/* The dialog is the only item in the form grid. */
/* Nothing is allowed to overflow container itself. */
/* Container is itself a grid container for its children. */
/* Container can be the target of pointer events. */
/* It sits on top of the mask. */
.dialog-module__dialog {
    /* It sets maximum sizes so its body can handle overflow. */
    /* Minimum keeps a 16:9 aspect ratio and is 40rem x 22.5rem.  */
}

/*
 *  Dialog Header styles.
 */

.dialog-module__header {

    /* The Header is itself a grid container for its children. */
}

.dialog-module__headerText {
}

.dialog-module__headerButton {
    /* Horizontally align the close button to the right. */
}

/*
 *  Dialog Body styles.
 */

.dialog-module__body {

    /* The Body is itself a grid container for its children. */
}

.dialog-module__contents {
}

.dialog-module__buttons {
}

.dialog-module__confirmButton {

    /* On mobile the confirm button should be first (on top). */
}

.dialog-module__cancelButton {
}

/*
 * Mobile-specific styles.
 *
 * Instead of being a full-page modal,
 * dialogs slide out from the right.
 */

@media (max-width: 959px) {
    .dialog-module__root {
        /* The Dialog starts off-screen on the right. */
        transform: translate3d(100%, 0, 0);
        /* For mobile, add position to the transitions. */
        transition-property: opacity, transform, visibility;
    }

    .dialog-module__root_open {
        /* The Dialog animates (slides) onto the screen. */
        transform: translate3d(0, 0, 0);
    }
}

.quantityStepper-module__root {
    --stroke: var(--venia-global-color-gray-600);
    grid-template-columns: 1fr 4rem 1fr;
}

.quantityStepper-module__wrap {
}

/* TODO @TW: cannot compose */
.quantityStepper-module__label:not(:focus):not(:active) {
    /* composes: sr-only from global; */
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    white-space: nowrap;
}

.quantityStepper-module__button {
    stroke: rgb(var(--stroke));
}

.quantityStepper-module__button:hover {
    --stroke: rgb(var(--venia-global-color-gray-900));
    border-color: rgb(var(--stroke));
}

/* TODO @TW: cannot compose */
.quantityStepper-module__button:disabled,
.quantityStepper-module__button:disabled:hover {
    --stroke: rgb(var(--venia-global-color-gray-400));
    /* composes: border-subtle from global; */
    border-color: rgb(var(--venia-global-color-gray-400));
}

.quantityStepper-module__button_decrement {
}

.quantityStepper-module__button_increment {
}

.quantityStepper-module__icon {
    touch-action: manipulation;
}

.quantityStepper-module__input {
}

.indicator-module__root {
    height: calc(100% - 6rem);
}

.indicator-module__global {
}

.indicator-module__message {
    letter-spacing: 0.25em;
}

.indicator-module__indicator {
    animation-direction: alternate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: indicator-module__pulse;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes indicator-module__pulse {
    0% {
        filter: grayscale(1);
        transform: scale(0.75) rotate(-540deg);
    }
    100% {
        filter: grayscale(0);
        transform: scale(1) rotate(0deg);
    }
}

.quantityStepper-module__root {
    --stroke: var(--venia-global-color-gray-600);
    grid-template-columns: 1fr 4rem 1fr;
}

.quantityStepper-module__wrap {
}

/* TODO @TW: cannot compose */

.quantityStepper-module__label:not(:focus):not(:active) {
    /* composes: sr-only from global; */
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
            clip-path: inset(100%);
    white-space: nowrap;
}

.quantityStepper-module__button {
    stroke: rgb(var(--stroke));
}

.quantityStepper-module__button:hover {
    --stroke: rgb(var(--venia-global-color-gray-900));
    border-color: rgb(var(--stroke));
}

/* TODO @TW: cannot compose */

.quantityStepper-module__button:disabled,
.quantityStepper-module__button:disabled:hover {
    --stroke: rgb(var(--venia-global-color-gray-400));
    /* composes: border-subtle from global; */
    border-color: rgb(var(--venia-global-color-gray-400));
}

.quantityStepper-module__button_decrement {
}

.quantityStepper-module__button_increment {
}

.quantityStepper-module__icon {
    touch-action: manipulation;
}

.quantityStepper-module__input {
}