@import url("../vendor/quill/dist/quill.core-492177b381dffba8c37f34e08ae7d58d.css");
@import url("../vendor/quill/dist/quill.bubble-875140a943d06a1c061d55776dce1265.css");
@import url("../vendor/quill/dist/quill.snow-4da2c5a5fa53f7b23528685a046ece46.css");

:root {
    --main-color: #d668e2;
    --main-color-light: #ffe9fb;
    --main-color-dark: #481342;
    --secondary-color: #3ec19b;
    --secondary-color-light: #CBFBEF;
    --secondary-color-light-half-alpha: #CBFBEF88;
    --secondary-color-light-full-alpha: #CBFBEF00;
    --secondary-color-dark: #25413D;
    --error-light: #FFCCCB;
    --white: #f9f9f9;
    --grey: #eaeaea;
    --black: #313639;
    --br-small: 2px;
    --br-mid: 4px;
    --br-big: 6px;
    --big-button-height: 80px;
    --big-button-width: 160px;
    --header-height: 240px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    color: var(--secondary-color-dark);
    text-decoration: none;
}

.to-be-deleted {
    background-color: var(--error-light);
}

nav {
    ul ul {
        margin-left: 1em;
    }
}

tr {
    &:hover {
        background-color: var(--grey);
    }
}

.inline-badge {
    font-size: 0.7em;
    padding: 0.15em;
    background-color: var(--secondary-color-light);
    border-radius: var(--br-mid);
}

.sf-toolbar * {
    color: var(--grey);
}

body {
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

.w100 {
    width: 100%;
}

a {
    display: inline;
    color: var(--secondary-color-dark);
    position: relative;
    z-index: 1;
    text-decoration: underline;
}

.big-button {
    width: 120px;
    max-width: 100%;
    height:44px;
    background-color: var(--secondary-color);
}

.card-container {
    display: flex;
    flex-flow: row wrap;
    &.horizontal-card-container {
        display: block;
        flex-flow: unset;
    }
    &>.card:nth-child(odd) {
        color: var(--main-color-light);
        background-color: var(--secondary-color-light);
    }
    &>.card:nth-child(even) {
        color: var(--secondary-color-light);
        background-color: var(--main-color-light);
        &:hover, &:active {
            color: var(--main-color-light);
            background-color: var(--secondary-color-light);
        }
    }
}

button, input[type="submit"] {
    padding: 4px;
    display: block;
    background-color: var(--main-color-light);
    border: none;
    cursor: pointer;
    width: 100%;
    color: var(--secondary-color-dark);
    &:hover {
        background-color: var(--secondary-color-light);
        color: var(--main-color-dark);
    }
}

label {
    display: block;
    background-image: linear-gradient(
        0deg,
        var(--secondary-color-light) 0%,
        var(--secondary-color-light-half-alpha) 10%,
        var(--secondary-color-light-full-alpha) 25%
    );
}

.help-text {
    font-size: 0.75em;
}

.card {
    min-width: 300px;
    display: block;
    padding: 4px;
    user-select: none;
    &.horizontal-card {
        width: 100%;
    }
}

svg {
    fill: var(--secondary-color-dark);
    vertical-align: middle;
}

body {
    position: relative;
}

.no-select {
    user-select: none;
}

.disabled {
    cursor: wait;
    position: relative;
    &::after {
        content: "";
        background-color: #ffffff88;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10000;
    }
}

[hidden="hidden"] {
    display: none;
}

header {
    background-color: var(--main-color);
    height: var(--header-height);
    padding: 16px;
}

nav {
    &.inline {
        display: flex;
        flex-flow: row nowrap;
        * {
            max-width: 64px;
            user-select: none;
        }
    }
    ul {
        li {
            flex-grow: 1;
            background-color: var(--main-color-light);
            &:active, &:hover {
                background-color: var(--secondary-color-light);
                color: var(--main-color-dark);
            }
            &>* {
                display: block;
                padding: 8px 0;
                text-align: center;
            }
        }
    }
}

form.single-line {
    display: flex;
    flex-flow: row nowrap;
}

main {
    flex-grow: 1;
    background-color: var(--secondary-color-light);
    padding: 6px;
    &>section {
        padding: 2px;
        background-color: var(--white);
        box-shadow: 2px 2px 2px var(--main-color);
        border-radius: var(--br-small);
        overflow-x: auto;
        &:not(:last-child) {
            margin-bottom: 6px;
        }
        p:not(table p),h1,h2,h3,h4,h5,h6 {
            margin-top: 0.25em;
            margin-bottom: 0.25em;
        }
        table {
            word-wrap: break-word;
            min-width: 100%;
            td:not(:last-child), th:not(:last-child) {
                border-right: 1px solid var(--main-color);
            }
            tbody>tr:not(:last-child)>td, th {
                border-bottom: 1px solid var(--main-color);
            }
            td, th {
                min-width: 40px;
                max-width: 30vw;
                padding: 4px;
            }
        }
    }
}

footer {
    padding: 6px;
    border-top: 1px solid var(--main-color);
    background-color: var(--white);
}

.flip {
    transform: rotate(180deg) scaleX(-1);
}

.fetch-form {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}

.float-right {
    float: right
}

.button {
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    background-color: var(--secondary-color);
    height: 24px;
    width: 24px;
    padding: 2px;
    border-radius: var(--br-small);
}

.button.active {
    background-color: var(--secondary-color-light);
}

.button svg, .button svg * {
    fill: var(--black);
}

.button-block {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: unset;
    padding: 4px;
}

.button * {
    height: 100%;
}

.collapsible {
    margin: 6px;
    display: flex;
    align-items: flex-end;
    flex-flow: column nowrap;
}

.collapsible>section {
    margin-top: 6px;
    display: none;
}
.collapsible.active>section {
    display: block;
}