/*!******************************************************************************
 * Danbooru Diffusion Prompt Builder
 * Copyright (C) 2022  Jabasukuriputo Wang
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 ******************************************************************************/

html,
body,
#app {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
}

button.is-circle svg.svg-inline--fa {
    width: 1em;
}

.el-tree-node__label {
    width: 100%;
    margin-right: 1.5rem;
}

svg:not(:root).svg-inline--fa,
svg:not(:host).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline-flex {
    display: inline-flex;
}

@media screen and (max-width: 1024px) {
    .d-sm {
        display: block;
    }
}

@media screen and (min-width: 1025px) {
    .d-none-sm {
        display: none;
    }
    .d-block-sm {
        display: block;
    }
    .d-inline-block-sm {
        display: inline-block;
    }
    .d-inline-flex-sm {
        display: inline-flex;
    }
}

html.dark .el-button--primary.is-link {
    --el-button-text-color: #6ea8fe;
}

html .el-switch {
    --el-switch-off-color: #5f6b86;
}
html.dark .el-switch {
    --el-switch-off-color: var(--el-border-color);
}

.mobile-topbar-el {
    display: none;
    text-align: center;
    margin: 0.75rem 0;
}

.mobile-topbar-orig-el {
    display: inherit;
    gap: inherit;
    align-items: inherit;
}

@media screen and (max-width: 1024px) {
    .mobile-topbar-el {
        display: block;
    }
    .mobile-topbar-orig-el {
        display: none;
    }
}

.el-button--info {
    --el-button-text-color: var(--el-color-black);
    --el-button-hover-text-color: var(--el-color-black);
}

.masonry {
    overflow-x: visible;
    .box-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: 512px;
    }

    @media screen and (max-width: 512px) {
        .box-card {
            width: calc(100% - 2px);
        }
    }

    @media screen and (min-width: 513px) {
        .box-card {
            width: calc(50% - 12px);
        }
    }

    @media screen and (min-width: 1024px) {
        .box-card {
            width: calc(100% - 2px);
        }
    }

    @media screen and (min-width: 1280px) {
        .box-card {
            width: calc(50% - 12px);
        }
    }

    @media screen and (min-width: 1600px) {
        .box-card {
            width: calc(33% - 12.5px);
        }
    }

    @media screen and (min-width: 1920px) {
        .box-card {
            width: calc(25% - 17.5px);
        }
    }

    @media screen and (min-width: 2160px) {
        .box-card {
            width: calc(20% - 18px);
        }
    }

    @media screen and (min-width: 2560px) {
        .box-card {
            width: calc(16.67% - 19px);
        }
    }
}

.main .search {
    margin-bottom: 1.5rem;
    //padding-right: 1.5rem;
}

.switch-text-icon {
    font-style: normal;
    font-size: 14px;
    &.math-style,
    .math-style {
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
    }
}

.el-switch__core .el-switch__inner .is-icon {
    font-size: 14px;
}

code {
    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
