.form {
    --gap-base: 15px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-base);
    accent-color: var(--color-accent);

    width: max-content;

    &.centered {
        margin: 0 auto;
    }

    &.inactive {

        pointer-events: none;

        :after {
            position: absolute;
            inset: 0;
            content: '';
            background: var(--color-primary);
            mix-blend-mode: color;
            z-index: 1;
        }
    }

    .panel {
        display: flex;
        flex-direction: column;
        gap: var(--gap-base);

        padding: var(--gap-base) calc(var(--gap-base) * 1.2);
        box-sizing: border-box;

        border: solid hsla(var(--color-primary-hue), var(--color-primary-saturation), 85%, 50%) 1px;
        border-radius: var(--border-radius-big);

        transition: opacity var(--transition-animation-ms) ease, height var(--transition-animation-ms) ease, padding var(--transition-animation-ms) ease;

        &.hidden {
            opacity: 0;
            overflow: hidden;
            height: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        &.revealed {
            opacity: 1;
            height: auto;
            padding: var(--gap-base) calc(var(--gap-base) * 1.2);
        }
    }

    .formBlock {
        display: flex;
        flex-direction: column;

        label {
            display: block;
        }

        > .formRadios {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        label + .formRadios {
            margin-top: 5px;
        }

        .formRadio {
            display: flex;
            gap: 5px;
            align-items: center;

            > input[type="radio"] {
                width: 18px;
                height: 18px;
                cursor: pointer;
            }

            > label {
                margin-top: 3px;

                &[for] {
                    cursor: pointer;
                }
            }
        }
    }
}

input[type=range] {
    width: 100%;
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
}

input[type=file].directUpload::-webkit-file-upload-button {
    visibility: hidden;
}

input[type=file].directUpload {
    width: 150px;
    --title: 'Upload';
}

input[type=file].directUpload::before {
    --padding-base: 10px;
    width: 100%;
    box-sizing: border-box;

    content: var(--title);
    display: inline-block;

    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;

    font-family: var(--font-family-main);
    font-size: var(--font-size);
    line-height: 1.4em;

    background-color: var(--color-accent);
    color: #fff;
    border-color: transparent;

    border-radius: var(--border-radius);
    padding: var(--padding-base) calc(var(--padding-base) * 1.4);

    padding-left: 45px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7l-5-5l-5 5m5-5v12"/%3E%3C/svg%3E');

    background-size: 20px;
    background-position: 15px center;
    background-repeat: no-repeat;

    transition: all var(--transition-animation-ms) ease;
    transition-property: color, background;
}

input[type=file].directUpload.uploading {
    --title: 'Uploading';
}

input[type=file].directUpload.uploading::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzogYXV0bzsgZGlzcGxheTogYmxvY2s7IGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OyIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHJ4PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0zcyIgZHVyPSIzLjMzMzMzMzMzMzMzMzMzMzVzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDM2IDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHJ4PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0yLjY2NjY2NjY2NjY2NjY2NjVzIiBkdXI9IjMuMzMzMzMzMzMzMzMzMzMzNXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNzIgNTAgNTApIj4KICA8cmVjdCBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjEyIiB3aWR0aD0iNiIgcnk9IjIuMjgwMDAwMDAwMDAwMDAwMiIgcng9IjIuMjgwMDAwMDAwMDAwMDAwMiIgeT0iMjQiIHg9IjQ3Ij4KICAgIDxhbmltYXRlIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLTIuMzMzMzMzMzMzMzMzMzMzNXMiIGR1cj0iMy4zMzMzMzMzMzMzMzMzMzM1cyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIxOzAiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMDggNTAgNTApIj4KICA8cmVjdCBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjEyIiB3aWR0aD0iNiIgcnk9IjIuMjgwMDAwMDAwMDAwMDAwMiIgcng9IjIuMjgwMDAwMDAwMDAwMDAwMiIgeT0iMjQiIHg9IjQ3Ij4KICAgIDxhbmltYXRlIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLTJzIiBkdXI9IjMuMzMzMzMzMzMzMzMzMzMzNXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTQ0IDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHJ4PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0xLjY2NjY2NjY2NjY2NjY2NjdzIiBkdXI9IjMuMzMzMzMzMzMzMzMzMzMzNXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHJ4PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0xLjMzMzMzMzMzMzMzMzMzMzNzIiBkdXI9IjMuMzMzMzMzMzMzMzMzMzMzNXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjE2IDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHJ4PSIyLjI4MDAwMDAwMDAwMDAwMDIiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0xcyIgZHVyPSIzLjMzMzMzMzMzMzMzMzMzMzVzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI1MiA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iMi4yODAwMDAwMDAwMDAwMDAyIiByeD0iMi4yODAwMDAwMDAwMDAwMDAyIiB5PSIyNCIgeD0iNDciPgogICAgPGFuaW1hdGUgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgZHVyPSIzLjMzMzMzMzMzMzMzMzMzMzVzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI4OCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iMi4yODAwMDAwMDAwMDAwMDAyIiByeD0iMi4yODAwMDAwMDAwMDAwMDAyIiB5PSIyNCIgeD0iNDciPgogICAgPGFuaW1hdGUgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSItMC4zMzMzMzMzMzMzMzMzMzMzcyIgZHVyPSIzLjMzMzMzMzMzMzMzMzMzMzVzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMyNCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiNmZmZmZmYiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iMi4yODAwMDAwMDAwMDAwMDAyIiByeD0iMi4yODAwMDAwMDAwMDAwMDAyIiB5PSIyNCIgeD0iNDciPgogICAgPGFuaW1hdGUgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwcyIgZHVyPSIzLjMzMzMzMzMzMzMzMzMzMzVzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnPjwvZz48L2c+PCEtLSBbbGRpb10gZ2VuZXJhdGVkIGJ5IGh0dHBzOi8vbG9hZGluZy5pbyAtLT48L3N2Zz4=");
    background-size: 30px;
    background-position: 10px center;
}

input[type=file].directUpload:hover::before {
    background-color: hsl(var(--color-accent-hue), var(--color-accent-saturation), calc(var(--color-accent-brightness) * var(--hover-color-brightness-multiplier)));
    color: #fff;
}