@import url("main.css");

:root {
    --accent-color: oklch(65.33% 0.158 247.76);
}

form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem 2rem;
}

form > * {
    display: flex;
    align-items: center;
    gap: 1rem;
}

form label:after {
    content: ":";
}

/* text entries */
form :is(input[type=text], input[type=url], textarea) {
    background-color: var(--fg-color);
    border: none;
    border-radius: .25lh;
    color: var(--text-color, white);
    padding: .5em;
    font-family: sans-serif;
    flex-grow: 1;
}

/* focus outlines */
:is(form :is(input[type=text], input[type=url], textarea), .btn):focus-visible {
    outline: 2px solid var(--accent-color);
}

.btn, #is-dataset-toggle {
    transition: outline ease-in 100ms;
}

/* input validation */
form :is(input[type=text], input[type=url], textarea):user-valid {
    --validation-color: lime;
}

form :is(input[type=text], input[type=url], textarea):user-invalid {
    --validation-color: red;
    outline-style: solid;
}

form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid) {
    outline-color: var(--validation-color);
}

form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid):not(:focus-visible) {
    outline-width: 1px;
}

/* switch */
label:has(#is-dataset) {
    gap: 0;
}

#is-dataset {
    top: -100vh;
    left: -100vw;
    position: absolute;
}

#is-dataset-toggle {
    margin-inline: 1ch;
    padding-inline: .5ch;
    width: 2rem;
    height: 1lh;
    background-color: var(--fg-color);
    border-radius: .5lh;
    position: relative;
}

#is-dataset-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    --switch-gap: 2px;
    --size: calc(1lh - 2 * var(--switch-gap));
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    margin: var(--switch-gap);
    box-sizing: border-box;
    background-color: var(--text-color);
    transition: inset-inline ease-out 50ms;
    filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
}

#is-dataset:focus-visible + #is-dataset-toggle {
    outline: 2px solid var(--accent-color);
}

#is-dataset:not(:checked) + #is-dataset-toggle::before {
    left: 0;
}

#is-dataset:checked + #is-dataset-toggle::before {
    inset-inline: calc(2rem - .5lh - var(--switch-gap)) 0;
}

/* short description box */
form :has(#short-description) {
    grid-column: 1 / 2;
}

form :has(#url) {
    grid-column: 2 / 4;
}

/* full description box */
#full-description-box {
    grid-column: 1 / 4;
    margin: 1rem 0;
    align-items: start;
}

#full-description {
    height: 15rem;
    box-sizing: border-box;
}

/* button bar */
#btn-bar {
    grid-column: 1 / 4;
    justify-content: end;
    gap: 1rem;
}

/* button styling */
.btn {
    padding: .5lh 1lh;
    border: none;
    border-radius: .5lh;
    --btn-color: var(--fg-color);
    background-color: var(--btn-color);
    color: var(--text-color);
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 100ms, filter 200ms;
    transition-timing-function: ease-out;
    --drop-shadow-opacity: .5;
    --drop-shadow-offset-y: 0;
    --drop-shadow-blur: .25rem;
    --drop-shadow: drop-shadow(
        rgba(0, 0, 0, var(--drop-shadow-opacity))
        0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
    );
    filter: var(--drop-shadow);
}

.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
    outline-offset: 2px;
}

.btn:not(:disabled):hover {
    background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
    --drop-shadow-opacity: .8;
    --drop-shadow-offset-y: .25rem;
    --drop-shadow-blur: .4rem;
}

.btn.suggested {
    --btn-color: var(--accent-color);
}

.btn:disabled {
    filter: var(--drop-shadow) grayscale(.5) brightness(.5);
}