/* Buttons */
.button,
button[type='submit'] {
    --button-min-width: 230px;
    font-size: 16px;
    line-height: 20px;
    padding: 15px 25px;
    border-radius: 2px;
    min-width: var(--button-min-width);
    max-width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    appearance: none;
    user-select: none;
    transition: ease 150ms background-color, ease 150ms color;
    text-align: center;
}

.button__inner {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.button--full {
    width: 100%;
}

.button--large {
    padding: 20px 50px;
}

@media (min-width: 768px) {
    .button {
        padding: 15px 35px;
    }

    .button--large {
        padding: 20px 75px;
    }

    .button--toggle {
        padding: 15px 25px;
    }
}

@media (max-width: 767px) {
    .button--full-mobile {
        width: 100%;
    }
}

/* Primary */
.button--primary,
.button--primary:focus,
button[type='submit'],
button[type='submit']:focus {
    color: var(--color-white);
    box-shadow: 0 1px 0 rgb(173, 54, 22);
    background-color: var(--color-primary);
}

    .button--primary:hover,
    .js-focus-visible .button--primary:focus:not(.focus-visible),
    button[type='submit']:hover,
    .js-focus-visible button[type='submit']:focus:not(.focus-visible) {
        color: var(--color-white);
        background-color: var(--color-primary-hover);
    }

    .button--primary.disabled {
        background-color: grey;
        cursor: not-allowed;
        box-shadow: none;
    }
        .button--primary.disabled.multisections {
            position: absolute;
            top: 89.4%;
            right: 0;
        }

/* Secondary */
.button--secondary,
.button--secondary:focus {
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

    .button--secondary:hover,
    .js-focus-visible .button--secondary:focus:not(.focus-visible) {
        color: var(--color-primary);
        background-color: rgb(255, 247, 245);
    }

/* Tertiary */
.button--tertiary {
    background-color: var(--color-white);
    box-shadow: 0 1px 0 rgba(198, 198, 198);
}

    .button--tertiary:hover,
    .js-focus-visible .button--tertiary:focus:not(.focus-visible) {
        color: var(--color-white);
        background-color: var(--color-primary);
    }

/* Clean */
.button--clean {
    color: var(--color-primary);
    min-width: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
    font-size: 14px;
    line-height: 22px;
}

    .button--clean:hover,
    .js-focus-visible .button--clean:focus:not(.focus-visible) {
        color: var(--color-primary-hover);
    }

/* Toggle */
.button--toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

    .button--toggle,
    .button--toggle:focus,
    .button--toggle:hover,
    .js-focus-visible .button--toggle:focus:not(.focus-visible) {
        color: var(--color-secondary-3);
    }

        .button--toggle::after {
            content: '';
            display: block;
            height: 13px;
            width: 13px;
            margin-left: 20px;
            flex: 0 0 auto;
            transform-origin: center;
            background: center / contain url('/gfx/icons/dropdown_arrow.svg') no-repeat;
        }

@media (min-width: 768px) {
    .button--toggle,
    .button--toggle:focus,
    .button--toggle:hover,
    .js-focus-visible .button--toggle:focus:not(.focus-visible) {
        color: var(--color-secondary);
    }
}

/* Toggler for dropdowns */
.toggler {
    max-width: 100%;
}

.toggler__summary {
    list-style: none;
    display: block;
}

.toggler[open] .toggler__summary .button--toggle::after {
    transform: rotate(-180deg);
}

.toggler--with-overlay[open] .toggler__summary::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-index-toggler-closer);
    display: block;
    cursor: default;
    content: '';
    background: transparent;
}

.toggler__summary::-webkit-details-marker {
    display: none;
}

.toggler__content {
    position: relative;
    z-index: var(--z-index-toggler);
}

/* Native dropdown/select */
select:not([class^='ui-']),
.form-select {
    --icon-width: 13px;
    --spacing-sides: 25px;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 20px;
    padding: 15px calc(var(--icon-width) + var(--spacing-sides) + 20px) 15px 20px;
    border-radius: 2px;
    width: 100%;
    appearance: none;
    transition: ease 200ms background-color, ease 200ms color, ease 200ms box-shadow;
    color: var(--color-secondary-3);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-secondary-4);
    background: calc(100% - var(--spacing-sides)) center / var(--icon-width) url('/gfx/icons/dropdown_arrow.svg') no-repeat;
}

    select:focus,
    .form-select:focus {
        box-shadow: inset 0 0 0 1px var(--color-secondary-2);
    }

        select:focus:invalid,
        .form-select:focus:invalid {
            box-shadow: inset 0 0 0 1px var(--color-primary);
        }

            select:focus:invalid + .error,
            .form-select:focus:invalid + .error {
                display: block;
            }

/* Label */
label {
    display: block;
    font-size: 12px;
    line-height: 24px;
    color: var(--color-secondary-3);
    margin-top: 25px;
}

    label > i {
        color: var(--color-primary);
    }

/* Inputs */
input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']),
textarea {
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary-4);
    border-radius: 2px;
    font-size: 16px;
    line-height: 24px;
    height: 50px;
    padding: 0 19px;
    width: 100%;
    transition: border 200ms ease, color 200ms ease;
}

textarea {
    padding: 15px 19px;
    min-height: 170px;
    overflow-y: auto;
}

    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file'])::placeholder,
    textarea::placeholder {
        color: var(--color-secondary-3);
    }

    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):focus,
    textarea:focus {
        outline: 0;
        border-color: var(--color-secondary-2);
    }

    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):not(:placeholder-shown):focus:invalid,
    textarea:not(:placeholder-shown):focus:invalid,
    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']).invalid,
    textarea.invalid {
        border-color: var(--color-primary);
    }

        input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):not(:placeholder-shown):focus:invalid + .error,
        textarea:invalid:not(:placeholder-shown) + .error {
            display: block;
        }

    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):placeholder-shown,
    textarea:placeholder-shown {
        text-overflow: ellipsis;
    }

    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):disabled,
    textarea:disabled,
    input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):disabled::placeholder,
    textarea:disabled::placeholder {
        color: var(--color-secondary-5);
        border-color: var(--color-secondary-5);
    }

/* File upload */
input[type='file'] {
    width: 100%;
    border: 0;
    padding: 0;
    height: auto;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 22px;
    appearance: none;
}

    input[type='file']::-webkit-file-upload-button {
        display: none;
    }

    input[type='file']::before {
        content: 'Vedhæft én eller flere filer';
        display: inline-block;
        background: 0 50% / 11px url('/gfx/icons/clips.svg') no-repeat;
        white-space: nowrap;
        user-select: none;
        cursor: pointer;
        font-size: 16px;
        line-height: 22px;
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
        padding: 0 10px 0 25px;
    }

/* Error message */
.error {
    color: var(--color-primary);
    margin: 0 0 20px;
    font-size: 12px;
    line-height: 24px;
    display: none;
}

/* Radio */
.form-radio {
    position: relative;
}

    .form-radio + .form-radio {
        margin-top: 15px;
    }

    .form-radio input {
        width: 0;
        height: 0;
        position: absolute;
        opacity: 0;
    }

        .form-radio input:focus + .form-radio__text::before,
        .form-radio input:hover + .form-radio__text::before,
        .form-radio input:checked + .form-radio__text::before {
            border-color: var(--color-primary);
        }

        .form-radio input:disabled + .form-radio__text {
            color: rgba(var(--color-secondary-rgb-1), 0.3);
        }

            .form-radio input:disabled + .form-radio__text::before {
                border-color: rgb(112, 112, 112, 0.2);
            }

            .form-radio input:disabled + .form-radio__text::after {
                background-color: rgb(112, 112, 112, 0.2);
            }

        .form-radio input:checked + .form-radio__text::after {
            opacity: 1;
            transform: scale(1);
        }

.form-radio__text {
    display: block;
    padding: 2px 0 2px 40px;
    font-size: 12px;
    line-height: 24px;
    color: var(--color-secondary-3);
}

    .form-radio__text::before,
    .form-radio__text::after {
        content: '';
        position: absolute;
    }

    .form-radio__text::before {
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid rgb(112, 112, 112);
        transition: ease 200ms border-color;
    }

    .form-radio__text::after {
        left: 6px;
        top: 6px;
        width: 16px;
        height: 16px;
        opacity: 0;
        transform: scale(0.5);
        border-radius: 50%;
        transition: ease 200ms opacity, ease 200ms transform;
        background-color: var(--color-primary);
    }

/* Checkbox */
.form-checkbox {
    position: relative;
}

    .form-checkbox + .form-checkbox {
        margin-top: 15px;
    }

    .form-checkbox input {
        width: 0;
        height: 0;
        position: absolute;
        opacity: 0;
    }

        .form-checkbox input:focus + .form-checkbox__text::before,
        .form-checkbox input:hover + .form-checkbox__text::before,
        .form-checkbox input:checked + .form-checkbox__text::before {
            border-color: var(--color-primary);
        }

        .form-checkbox input:checked + .form-checkbox__text::after {
            opacity: 1;
            transform: scale(1);
        }

        .form-checkbox input:disabled + .form-checkbox__text {
            color: rgba(var(--color-secondary-rgb-1), 0.3);
        }

            .form-checkbox input:disabled + .form-checkbox__text::before {
                border-color: rgb(112, 112, 112, 0.2);
            }

            .form-checkbox input:disabled + .form-checkbox__text::after {
                filter: grayscale(100%);
            }

        .form-checkbox input:checked:disabled + .form-checkbox__text::after {
            opacity: 0.4;
        }

.form-checkbox__text {
    display: block;
    padding: 2px 0 2px 40px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-secondary);
}

    .form-checkbox__text::before,
    .form-checkbox__text::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
    }

    .form-checkbox__text::before {
        border-radius: 3px;
        border: 1px solid rgb(112, 112, 112);
        transition: ease 200ms border-color;
    }

    .form-checkbox__text::after {
        opacity: 0;
        transform: scale(0.5);
        transition: ease 200ms opacity, ease 200ms transform;
        background: center / 14px auto url('/gfx/icons/checkbox_mark.svg') no-repeat;
    }