@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/*********
** Custom Properties
*********/
:root {
    --background-colour-dark: #080808;
    --background-colour-medium: #101010;
    --background-colour-light: #181818;
    --border-medium: 1px solid #303030;
    --border-light: 1px solid #484848;
    --border-radius-medium: .3rem;
    --box-shadow-colour: #8a8783;
    --text-colour-primary: #d5d1c9;
    --text-colour-gaylord: #7703fc;
    --text-colour-pax: #fc7703;
}


/*********
** Browser Styles
*********/
::selection {
    background-color: var(--text-colour-primary);
    color: var(--background-colour-light);
}


/*********
** Blazor styles
*********/
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/*********
** Tag styles
*********/
* {
    box-sizing: border-box;
}

html {
    font-family: 'Roboto', sans-serif;
}

body {
    margin: 0 0 3vh 0;
    color: var(--text-colour-primary);
    background-color: var(--background-colour-dark);
}

input, button {
    background-color: var(--background-colour-light);
    border: var(--border-light);
}

    button:hover {
        cursor: pointer;
    }

textarea {
    background-color: var(--background-colour-medium);
    border: var(--border-medium);
    resize: none;
}

input, button, textarea {
    font-size: 1.2rem;
    padding: .5rem;
    color: var(--text-colour-primary);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow .5s;
}

    button:focus, button:hover, textarea:focus {
        outline: none;
        box-shadow: 0 0 0 1px var(--box-shadow-colour);
    }

    input[type=checkbox] {
        appearance: none;
        width: 1.5rem;
        height: 1.5rem;
        margin: -.2rem 0 0 0;
        display: grid;
        place-content: center;
    }

    input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        box-shadow: inset 1em 1em var(--text-colour-primary);
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }


/*********
** Component styles
*********/
.checkbox-container {
    display: grid;
    grid-template-columns: 1rem auto;
    gap: 1rem;
}

.loading {
    color: var(--text-colour-primary);
    font-weight: bold;
    text-align: center;
}

#settings {
    position: absolute;
    top: 0;
    margin: 1rem;
}

#barcode-data-entry {
    width: 30vw;
    margin: 2vh auto 0 auto;
}

    #barcode-data-entry * {
        width: 100%;
        margin-top: 1vh;
    }

#barcode-image-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

    #barcode-image-list div {
        width: 22vw;
        height: 10vh;
        margin: 3vw 0;
    }

        #barcode-image-list div img {
            width: 100%;
            height: 10vh;
            border-radius: var(--border-radius-medium);
            image-rendering: pixelated;
        }

        #barcode-image-list div span {
            font-size: 1.3rem;
            display: block;
            text-align: center;
        }

.gaylord {
    color: var(--text-colour-gaylord);
}

.pax {
    color: var(--text-colour-pax);
}