.bottom-sheet-hidden {
    display: none !important;
}

.bottom-sheet {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}

.bottom-sheet[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bottom-sheet .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #000000;
    opacity: 0.7;
}

.bottom-sheet .contents {
    border-radius: 1rem 1rem 0 0;

    background: white;

    position: relative;
    overflow-y: hidden;

    --default-transitions: transform 0.5s, border-radius 0.5s;

    transition: var(--default-transitions);
    transform: translateY(0);

    max-height: 100vh;
    height: 30vh;

    max-width: 70rem;

    box-sizing: border-box;
    /*padding-top: 3rem;*/
}

.bottom-sheet .contents:not(.not-selectable) {
    transition: var(--default-transitions), height 0.5s;
}

.bottom-sheet .contents.fullscreen {
    border-radius: 0;
    margin: 0;
    width: 100vw;
    max-width: unset;
}

.bottom-sheet[aria-hidden="true"] .contents {
    transform: translateY(100%);
}

.bottom-sheet .draggable-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 3rem;
    margin: auto;
    padding-top: 1rem;
    cursor: grab;
}

.bottom-sheet .draggable-thumb {
    width: inherit;
    height: 0.25rem;
    background: #DCDCDC;
    border-radius: 0.125rem;
}

.bottom-sheet .close-sheet {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    background-color: transparent;
}
.bottom-sheet .close-sheet:after {
    content: url('/images/app/icon-close-circle.svg');
}

.bottom-sheet .close-sheet:disabled {
    opacity: 0.4;
}

.bottom-sheet .controls {
    height: 48px;
    position: relative;
}

.bottom-sheet .body {
    display: flex;
    height: calc(100% - 48px);
    overflow-y: auto;
    gap: 1rem;
}

.bottom-sheet .body.no-header {
    height: 100%;
}

.bottom-sheet .progress-bar {
    height: 3px;
    background-color: var(--qp-color-light-grey);
    width: 100%;
    overflow: hidden;
    transition: height 0.1s;
}

.bottom-sheet .progress-bar-hidden {
    height: 0;
}

.bottom-sheet .progress-bar-value {
    width: 100%;
    height: 100%;
    background-color: var(--qp-color-super-light-blue);
    animation-name: bottomSheetIndeterminateAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 0 50%;
    transform:  translateX(0) scaleX(0);
}

@keyframes bottomSheetIndeterminateAnimation {
    0% {
        transform:  translateX(0) scaleX(0);
    }
    40% {
        transform:  translateX(0) scaleX(0.4);
    }
    100% {
        transform:  translateX(100%) scaleX(0.5);
    }
}

/* DESKTOP CLASSES AND MEDIA QUERIES */
@media (min-width: 992px) {

    .bottom-sheet .contents {
        border-radius: 8px;
        margin: auto;
        width: 60rem;
    }

    .bottom-sheet .draggable-thumb {
        display: none;
    }
}
/* DESKTOP CLASSES AND MEDIA QUERIES -eof- */