/* ================================
   FORM CONTROLS
   ================================ */
input {
    &[type="range"] {
        width: 100%;
        margin: 5px 0;
        accent-color: var(--frond);
        transition: accent-color 0.2s;

        &:hover {
            accent-color: var(--bloom);
        }
    }

    &[type="checkbox"] {
        accent-color: var(--frond);
    }
}

select {
    width: 100%;
    padding: 4px;
    background: var(--shade);
    color: var(--bud);
    border: 1px solid var(--dusk);
    border-radius: 4px;
    margin-top: 5px;
    transition: all 0.2s;

    &:hover,
    &:focus {
        color: var(--bloom);
        border-color: var(--frond);
    }
}

hr {
    margin: 15px 0;
    border: 1px solid var(--dusk);
}