@import '~box-ui-elements/es/styles/variables';
@import 'boxui';

$header-height: 48px;

.bp-is-hidden {
    /* stylelint-disable declaration-no-important */
    display: none !important;
    /* stylelint-enable declaration-no-important */
}

.bp-container,
.bp-container * {
    /* stylelint-disable declaration-no-important */
    box-sizing: border-box !important;
    /* stylelint-enable declaration-no-important */
}

.bp-container {
    position: relative;
    width: 100%;
    min-width: 300px;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 13px;
    border: 0 none;
    // disables non-standard gestures such as double-tap to zoom
    touch-action: manipulation;

    a {
        color: $seesee;
    }
}

.bp-header-container:not(.bp-is-hidden) {
    + .bp:not(.bp-is-fullscreen) {
        top: $header-height;
    }
}

.bp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $header-height;
    padding: 0 20px;
    background-color: $white;
    border-bottom: 1px solid $seesee;

    .bp-custom-logo {
        max-height: 30px;
    }

    .bp-default-logo svg {
        fill: $box-blue;
    }
}

.bp-header-btns {
    button {
        padding: 0 10px;

        svg {
            vertical-align: middle;
            fill: lighten($better-black, 15%);
        }

        &:hover {
            padding: 0 10px; // Override btn-plain

            svg {
                fill: $better-black;
            }
        }
    }
}

// Dark theme for header
.bp-theme-dark {
    .bp-header {
        background-color: fade-out($black, .15);
        border-bottom: 0;
    }

    .bp-header-btns button {
        svg {
            fill: fade-out($white, .1);
        }

        &:hover svg {
            fill: $white;
        }
    }

    .bp-default-logo svg {
        fill: $white;
    }

    .bp {
        background-color: $sunset-grey;
    }

    .bp-error {
        color: $white;
    }

    .bp-icon {
        opacity: .9;
    }
}

.bp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    background-color: $ffive;
    border: 0 none;
    outline: none;
    -webkit-overflow-scrolling: touch;

    &.bp-dark {
        background-color: $black;
    }

    .bp-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        outline: none;

        // Pseudo fullscreen for iOS Safari which doesn't support the fullscreen API
        &.bp-fullscreen-unsupported {
            position: fixed;
            z-index: $overlay-z-index;
        }
    }

    .bp-content.bp-is-fullscreen {
        width: 100%;
        background-color: inherit; // Safari needs some reminder of what to do for flex items in a flex container when in fullscreen
    }

    .bp-is-scrollable:focus {
        outline: none; // temporarily remove focus ring until we know how we want to indicate focus
    }
}

.accessibility-hidden {
    position: absolute;
    top: auto; // Some browsers ignore left without a top
    left: -9999px;
}

.bp-no-user-highlight {
    -webkit-touch-callout: none;
    user-select: none;
}

.bp-is-invisible {
    visibility: hidden;
}

.bp-notifications-wrapper {
    position: absolute; // Override _boxui.scss because Preview cannot assume taking up the full viewport
}

.bp-toggle-overlay {
    > button {
        margin-bottom: 0;
        margin-left: 0;
    }
}

.bp-overlay-wrapper {
    position: relative;
    display: inherit;

    .bp-overlay {
        margin-top: 5px;
    }

    &.bp-is-visible {
        .bp-overlay {
            transform: rotateY(0deg) rotateX(0deg);
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
            pointer-events: all;
        }
    }
}

//---------- Override popup related CSS from _boxui.scss ----------//
.bp-modal-dialog {
    width: 380px;
    padding: 20px;

    // Prevents modal from becoming taller when crawler is swapped with print checkmark
    .bp-print-check {
        height: 16px;
    }

    // Fix crawler appearance
    .bp-crawler {
        width: 10px;
        height: 16px;
        margin: 0 auto;
        font-size: 0;
        white-space: nowrap;
    }
}

.bp-modal-header {
    display: block;
    float: right;
    width: 100%;
    height: 0;
}

.bp-modal-content {
    text-align: center;

    .bp-modal-message {
        margin: 10px 0 20px;
        color: $fours;
    }
}

.bp-modal-close-button {
    float: right;

    svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
        fill: $downtown-grey;
    }
}

.bp-modal-actions {
    justify-content: flex-start;
    margin: 20px;
}

.bp-modal-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: $black;
}

.bp-popup-btn {
    margin: 0 auto;
}

.bp-popup-modal {
    position: absolute;
    top: 100px;
    right: 0;
    left: 0;

    // z-index as the base modal
    z-index: 160; // follows bp-modal from boxui
    margin: 0 auto;
}

.bp-container .bp-btn-primary {
    color: #fff;
}
