@import "https://cdn.jsdelivr.net/npm/sanitize.css" layer(sanitize);

@layer sanitize, utils, page, overrides;

@layer utils {
    :root {
        --font-family: 'Roboto', sans-serif;
        --font-size: 16px;
        --line-height: 1.17;

        --background-color: #fff;
        --text-color: #252525;
        --border-color: #ccc;
        --focus-color: #d61ed6;

        --page-max-width: 1150px;
        --page-max-height: 1250px;
        --page-padding: max(calc((100vw - var(--page-max-width)) / 2), 25px);

        --font-monospace: 'Courier New', Courier, monospace;
    }

    h1,
    h2,
    h3,
    p,
    ul,
    ol {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    ul,
    ol {
        list-style-type: none;
    }

    button,
    input,
    textarea {
        font-family: inherit;
    }

    img {
        user-select: none;
    }
}

@layer page {
    body {
        background: var(--background-color);
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--text-color);

        -webkit-font-smoothing: antialiased;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.02);

        min-height: min(100vh, var(--page-max-height));
        padding: 1rem var(--page-padding);

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: repeat(3, auto) 1fr repeat(2, auto);
        grid-template-areas:
            "header    header    header"
            "subheader subheader subheader"
            "label-in  separator label-out"
            "text-in   separator text-out"
            "convert   convert   convert"
            "url-info  url-info  url-info";
        gap: 1rem 2rem;
    }

    .header {
        grid-area: header;
        font-size: 2rem;
    }

    .subheader {
        grid-area: subheader;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .label-in-wrapper {
        grid-area: label-in;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .label-out-wrapper {
        grid-area: label-out;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: .5rem;
        user-select: none;
    }

    .label {
        display: flex;
        align-items: center;
        font-family: var(--font-monospace);
        user-select: none;
        font-weight: 600;
    }

    .label::before {
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        margin-right: .75rem;
        background-image: var(--label-background-image);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .label-in {
        color: #cb7b15;
        --label-background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCjxnIGRhdGEtbmFtZT0iTGF5ZXIgMiI+Cgo8ZyBkYXRhLW5hbWU9ImRpYWdvbmFsLWFycm93LXJpZ2h0LWRvd24iPgoKPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB0cmFuc2Zvcm09InJvdGF0ZSgtOTAgMTIgMTIpIiBvcGFjaXR5PSIwIi8+Cgo8cGF0aCBkPSJNMTcgOGExIDEgMCAwIDAtMSAxdjUuNTlsLTguMjktOC4zYTEgMSAwIDAgMC0xLjQyIDEuNDJsOC4zIDguMjlIOWExIDEgMCAwIDAgMCAyaDhhMSAxIDAgMCAwIDEtMVY5YTEgMSAwIDAgMC0xLTF6Ii8+Cgo8L2c+Cgo8L2c+Cgo8L3N2Zz4=");
    }

    .label-out {
        color: #06b206;
        --label-background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCjxnIGRhdGEtbmFtZT0iTGF5ZXIgMiI+Cgo8ZyBkYXRhLW5hbWU9ImRpYWdvbmFsLWFycm93LXJpZ2h0LXVwIj4KCjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEyIDEyKSIgb3BhY2l0eT0iMCIvPgoKPHBhdGggZD0iTTE4IDcuMDVhMSAxIDAgMCAwLTEtMUw5IDZhMSAxIDAgMCAwIDAgMmg1LjU2bC04LjI3IDguMjlhMSAxIDAgMCAwIDAgMS40MiAxIDEgMCAwIDAgMS40MiAwTDE2IDkuNDJWMTVhMSAxIDAgMCAwIDEgMSAxIDEgMCAwIDAgMS0xeiIvPgoKPC9nPgoKPC9nPgoKPC9zdmc+");
    }

    .separator {
        grid-area: separator;
        width: 2px;
        height: 100%;
        background: #b1b1b1;
        user-select: none;
    }

    .button {
        user-select: none;
    }

    .copy-to-buffer {
        grid-area: copy-to-buffer;
        max-width: 200px;
    }

    .textarea {
        border: .125rem solid var(--border-color);
        background-color: var(--background-color);
        border-radius: .2rem;
        padding: .5rem;
        min-height: 10rem;
        font-family: var(--font-monospace);
        transition: outline-color .2s ease-in-out;
    }

    .textarea-in {
        grid-area: text-in;
        --focus-color: #cb7b15;
    }

    .textarea-out {
        grid-area: text-out;
        --focus-color: #06b206;
    }

    .button-convert {
        grid-area: convert;
    }

    .url-info {
        grid-area: url-info;
        text-align: center;
        font-size: .75rem;
        margin-top: -.5rem;
        user-select: none;
    }

    .url-info:empty {
        display: none;
    }




    @media screen and (max-width: 768px) {
        body {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, auto) 1fr auto 1fr repeat(2, auto);
            grid-template-areas:
                "header"
                "subheader"
                "label-in"
                "text-in"
                "label-out"
                "text-out"
                "convert"
                "url-info";
        }

        .separator {
            display: none;
        }

        .textarea-in {
            margin-bottom: 2rem;
        }
    }
}

@layer overrides {
    * {
        outline-color: var(--focus-color);
    }
}