@import '../../../node_modules/bootstrap/scss/functions';
@import '../../../node_modules/bootstrap/scss/variables';
@import '../../../node_modules/bootstrap/scss/mixins';
@import 'variables';
@import '../../../node_modules/bootstrap/scss/reboot';
@import '../../../node_modules/bootstrap/scss/buttons';
@import '../../../node_modules/bootstrap/scss/button-group';
@import '../../../node_modules/bootstrap/scss/type';
@import '../../../node_modules/bootstrap/scss/code';
@import '../../../node_modules/bootstrap/scss/utilities/sizing';

.btn {
    font-weight: bold !important;
}

kbd {
    font-weight: bold;
    border: 1px solid $gray-400;
}

.alert strong + span::before {
    content: ': ';
}

.concordia-app-font-size-xxs {
    font-size: $concordia-app-font-size-xxs;
}

.concordia-app-font-size-xs {
    font-size: $concordia-app-font-size-xs;
}

.dropdown-no-icon {
    &::after {
        content: none !important;
    }
}

body.view-action-app {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif;
    border: none;
    min-width: map-get($container-max-widths, lg);
    background-color: $body-bg;
}

.concordia-app-navbar-brand {
    font-size: $concordia-app-font-size-xl;
}

main {
    flex-shrink: 1;
    max-height: inherit;
}

#action-app-footer {
    height: $concordia-app-footer-height;
    opacity: 0.8;
}

#action-app-global-controls > {
    :first-child,
    :last-child {
        width: 8rem;
    }
}

#asset-list-controls {
    background-color: $gray-200 !important;
    border-bottom: 1px solid $gray-600;
}

#asset-list-controls input[type='range'] {
    width: calc(100% - (2 * 1.5rem));
}

.concordia-app-input-group-text {
    font-weight: bold;
    border: none;
}

.concordia-app-range-min {
    font-size: $font-size-sm;
}

.concordia-app-range-max {
    font-size: $concordia-app-font-size-xl;
}

#contribute-container {
    border: none;
}

#editor-main {
    max-height: 100%;
}

#asset-list-container {
    max-height: 100%;
    overflow-y: scroll;
    flex-grow: 1;
}

#asset-list {
    $asset-thumbnail-gap: 5px;
    --asset-thumbnail-size: 256px;
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-columns: repeat(auto-fill, var(--asset-thumbnail-size));
    grid-template-rows: auto;
    justify-content: center;

    .asset {
        display: flex;
        align-items: flex-start;
        width: var(--asset-thumbnail-size);
        height: var(--asset-thumbnail-size);
        object-fit: contain;
        border: $border-width solid $gray-600;
        background-color: #f6f6f6;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-origin: content-box;
        padding: $asset-thumbnail-gap;
        cursor: pointer;
        transition-property: height, width;
        transition-duration: 0.1s;

        &:hover {
            outline: 2px solid $blue;
            outline-offset: -2px;
        }

        &.asset-active {
            outline: 2px solid $orange;
            outline-offset: -2px;
            position: relative;
            z-index: 1;
        }

        &[data-unavailable] {
            position: relative;
            &::before {
                content: attr(data-unavailable);
                width: 100%;
                position: absolute;
                background-color: #beeaff;
                bottom: 0;
                left: 0;
                right: 0;
                font-size: $concordia-app-font-size-xxs;
                line-height: $concordia-app-line-height-xxs;
                font-weight: bold;
                padding: $concordia-app-asset-unavailable-padding-y
                    (
                        ($concordia-app-asset-unavailable-padding-x * 2) +
                            $concordia-app-asset-unavailable-icon-width
                    )
                    $concordia-app-asset-unavailable-padding-y
                    $concordia-app-asset-unavailable-padding-x;
                min-height: ($concordia-app-asset-unavailable-padding-y * 2) +
                    $concordia-app-asset-unavailable-icon-width;
            }
            &::after {
                content: '\f2bd';
                /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: $concordia-app-font-size-xl;
                position: absolute;
                right: $concordia-app-asset-unavailable-padding-x;
                bottom: 0;
            }
            &:hover,
            &:focus {
                &::before,
                &::after {
                    display: none;
                }
            }
        }
    }

    .asset-tooltip {
        padding: $concordia-app-asset-list-text-padding;
        border: 2px solid $blue;
        pointer-events: none;
        background-color: $white;
        font-size: $concordia-app-font-size-xxs;
        line-height: $concordia-app-line-height-xxs;
        position: relative;
        z-index: 3;
        margin: ($asset-thumbnail-gap + 1) * -1;
        .item-title {
            font-weight: bold;
            margin-bottom: 1rem;
        }
    }
}

#asset-viewer {
    display: none;
}

#action-app-main {
    #editor-main {
        display: none !important;
    }
    #action-app-sidebar {
        order: 2;
    }
    #asset-list-container {
        order: 1;
    }
    #help-panel {
        order: 3;
    }
    #asset-list-toggle {
        display: none;
    }
    &[data-mode='transcribe'] {
        #reviewer-column {
            display: none;
        }
        #transcriber-column {
            display: flex;
        }
    }

    &[data-mode='review'] {
        #transcriber-column {
            display: flex;
        }

        #reviewer-column {
            display: flex;
        }
    }

    &[data-open-asset-id] {
        #editor-main {
            display: flex !important;
        }
        #asset-viewer {
            flex-grow: 1;
            max-height: inherit;
            display: flex;
            flex-direction: column;
        }
        #asset-list-controls {
            display: none;
        }
        #asset-list-container {
            order: 2;
            flex-grow: 0;
            flex-shrink: 0;
            padding: 0 $concordia-app-asset-list-thumbnail-gap
                $concordia-app-asset-list-thumbnail-gap;
        }
        #asset-list {
            grid-template-columns: repeat(
                auto-fill,
                $concordia-app-asset-list-thumbnail-width
            );
            row-gap: 0;
            .asset {
                width: $concordia-app-asset-list-thumbnail-width;
                height: $concordia-app-asset-list-thumbnail-width;
                margin-bottom: -1px;
            }
        }
        #contribute-container {
            width: 100%;
            height: 100%;
        }

        #action-app-sidebar {
            order: 1;
        }
        #help-panel {
            order: 3;
        }
        #asset-list-toggle {
            display: block;
        }
    }

    &:not([data-open-asset-id]) #close-viewer-button {
        display: none;
    }
}

#action-app-sidebar {
    border-left: 1px solid $concordia-app-toolbar-border;
    border-right: 1px solid $concordia-app-toolbar-border;
    background-color: $concordia-app-toolbar-background;
    button {
        border: 1px solid transparent;
        border-radius: 0;
        margin: -1px -1px 5px;
        background-color: transparent;
        font-size: 20px;
        &.active {
            border-color: $concordia-app-toolbar-border;
            background-color: $concordia-app-active-color;
            border-right-color: $concordia-app-active-color;
        }
    }
}

.concordia-app-browse-all-button {
    font-size: $concordia-app-font-size-xxs;
    font-weight: bold;
    padding: 10px;
}

#asset-info-modal {
    .modal-dialog {
        max-width: 60rem;
    }

    .modal-body {
        max-height: 80vh;
        overflow-y: auto;
    }

    *:not(.asset-title) {
        font-size: 1rem !important;
    }
    .asset-title {
        font-size: $h4-font-size !important;
    }

    .details-body {
        .description {
            max-width: 40rem;
        }
    }

    .related-links {
        background-color: unset;
        border: unset;

        .title {
            text-align: center;
        }

        .link {
            .title {
                display: inline;

                &::after {
                    content: ': ';
                }
            }

            a {
                display: inline-block;
                max-width: 100%;
                vertical-align: top;

                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
}

#asset-metadata {
    .hierarchy {
        font-size: 1rem !important;
        a {
            text-decoration: underline;
        }
    }
}

#viewer-column,
#editor-column {
    flex-basis: 50%;
}

#viewer-column {
    position: relative;
    #viewer-controls {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute !important;
        padding: 5px;
        left: 8px;
        top: 8px;
        z-index: 2;
    }
    #asset-image {
        background-color: $black;
    }
}

#reviewer-column {
    // We want this to be the full height of its containing element
    // with enough padding to not be covered by the footer:
    max-height: 100%;
}

#review-transcription-text {
    border: 1px solid $gray-800;
    padding: 10px;
    flex: 1 1 0;
    overflow-y: scroll;
    white-space: pre-wrap;
    .nothing-to-transcribe & {
        font-style: oblique;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#transcription-input {
    border-radius: 0;
    border: 1px dashed $gray-400;
    background-color: $gray-100;

    &:disabled,
    &[readonly] {
        background-color: $input-disabled-bg;
    }
}

.unavailable {
    #editor-column::before {
        content: 'Someone else is working on this page';
        text-align: center;
        font-weight: bold;
    }
}

[readonly] + label,
[disabled] + label {
    color: #999;
}

.metadata-list .title {
    text-transform: capitalize;
}

#help-panel {
    overflow: auto;
    padding: 1rem;
    flex-basis: 285px;
    min-width: 285px;
    * {
        font-size: $concordia-app-font-size-xs;
    }
}

.concordia-app-transcription-toolbar {
    > button {
        margin: 0 10px;
    }
}
