/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    FORM
    that implement the UU design system specifically for Sitevision

    IMPORTANT! Do not enable compression for this file in Sitevision.

    There is a known bug in Sitevision's CSS compressor: it removes spaces
    inside data: URLs used for background images. Designsystemet's own CSS
    is compressed by Sitevision, which breaks those background images. This
    file contains override rules for the affected images. Once Sitevision
    fixes this bug, these override rules can be removed from this file.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Color of form-text */
.form-text {
    color: var(--color-text-muted);
}

/* Color when focusing form controls */
.form-control:focus {
    box-shadow: none;
    outline: 3px solid var(--color-focus);
}

.form-select:focus {
    box-shadow: none;
    outline: 2px solid var(--color-focus);
    border-color: var(--color-focus);
}

/* Background images for input */

.was-validated .form-control:valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    border-color: var(--color-success);
}

.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
    border-color: var(--color-success) !important;
}

.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
    border-color: var(--color-danger);
}

.form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E") !important;
    border-color: var(--color-danger) !important;
}

.form-control.is-valid:focus {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, 0.25) !important;
}

.form-control.is-invalid:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, 0.25) !important;
}

/* Background images for select */

/* -webkit-appearance and -moz-appearance are added for backwards compatibility */
.form-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2.5rem;
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
}

.form-select.is-valid {
    border-color: var(--color-success) !important;
}

.form-select.is-invalid {
    border-color: var(--color-danger) !important;
}

/* Check input */

.form-check-input:checked[type='checkbox'] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Form group */

.form-group-toggle-button,
.form-group-toggle-button:hover {
    padding: 0.5rem 1rem !important;
}

.form-group-toggle-container {
    margin-bottom: 1rem;
}

.form-group-toggle-container.no-validation input:not(.form-multiple-select-option),
.form-group-toggle-container.no-validation textarea,
.form-group-toggle-container.no-validation select,
.form-group-toggle-container.no-validation .form-multiple-select {
    background-image: none !important;
    border-color: var(--color-form-control) !important;
}

.form-group-toggle-container.no-validation select,
.form-group-toggle-container.no-validation .form-multiple-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-group-toggle-container.no-validation input:focus,
.form-group-toggle-container.no-validation textarea:focus,
.form-group-toggle-container.no-validation select:focus,
.form-group-toggle-container.no-validation .form-multiple-select:focus {
    border-color: var(--color-form-control) !important;
    box-shadow: none !important;
}

.form-group-toggle-container.is-valid .form-group-toggle-button span,
.form-group-toggle-container.is-invalid .form-group-toggle-button span,
.form-group-toggle-container.no-validation .form-group-toggle-button span {
    flex-grow: 1;
}

.form-group-toggle-container.is-valid .form-group-toggle-button::after,
.form-group-toggle-container.is-invalid .form-group-toggle-button::after,
.form-group-toggle-container.no-validation .form-group-toggle-button::after {
    background-size: 24px;
    content: ' ';
    display: inline-block;
    height: 24px;
    margin-left: 8px;
    min-width: 24px;
    vertical-align: bottom;
}

.form-group-toggle-container.is-valid .form-group-toggle-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2300700f'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

.form-group-toggle-container.is-invalid .form-group-toggle-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23990000'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E");
}

/* Inline form */

@media (min-width: 992px) {
    .form-label-inline {
        margin-right: 1rem;
    }

    .form-check-inline-lg {
        display: inline-block;
        margin-right: 1rem;
    }

    .form-check-inline-lg .form-check-label {
        display: inline;
    }

    .form-check-input-inline {
        float: none !important;
    }
}

/* Multiple select */

.form-multiple-select {
    padding: 0.575rem 2.25rem 0.575rem 0.75rem;
}

.form-multiple-select-options-container {
    position: relative;
    z-index: 10;
}

.form-multiple-select-options {
    background-color: var(--bs-body-bg);
    border-radius: 0.25rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    left: 0;
    max-height: 12rem;
    overflow-y: auto;
    padding: 1rem;
    position: absolute;
    scrollbar-color: var(--color-grey-dark) var(--color-grey-light);
    scrollbar-width: thin;
    top: 0;
    width: 100%;
    z-index: 1;
}

@media (min-width: 1200px) {
    .form-multiple-select-options {
        max-height: 20rem;
    }
}

.form-multiple-select-options::-webkit-scrollbar {
    width: 11px;
}

.form-multiple-select-options::-webkit-scrollbar-track {
    background: var(--color-grey-light);
}

.form-multiple-select-options::-webkit-scrollbar-thumb {
    background-color: var(--color-grey-dark);
    border-radius: 6px;
    border: 3px solid var(--color-grey-light);
}

.form-multiple-select-option-container {
    margin-bottom: 0.5rem;
}

.form-multiple-select-option-container:last-child {
    margin-bottom: 0;
}

.form-multiple-select-option,
.form-multiple-select-label {
    cursor: pointer;
}

.form-multiple-select-option:checked {
    background-color: var(--color-active-grey);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    border-color: var(--color-active-grey);
}

.form-multiple-select-option:valid {
    border-color: var(--color-text) !important;
}

.form-multiple-select-option:valid:checked {
    background-color: var(--color-text) !important;
}

@media (prefers-color-scheme: dark) {
    .form-multiple-select-option:valid:checked {
        background-color: #8d7e60 !important;
    }
}

.form-multiple-select-option:valid~.form-multiple-select-label {
    color: var(--color-text) !important;
}

/* File input */

.form-file-input input[type='file'] {
    display: none;
}

.form-file-input input[readonly] {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--color-form-control) !important;
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    color: var(--color-text);
    cursor: pointer !important;
}

.form-file-input input[readonly].is-valid {
    border-color: var(--color-success) !important;
}

.form-file-input input[readonly].is-invalid {
    border-color: var(--color-danger) !important;
}

.form-file-input:hover .button {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
}

.form-file-input:focus input[readonly] {
    background-color: var(--color-grey-light) !important;
}


/********************************

Forms from Ungapped

********************************/

form[action*="ungapped.io"],
form[action*="ungpd.com"] {
    margin-bottom: 1.5rem;
}

form[action*="ungapped.io"] legend,
form[action*="ungpd.com"] legend {
    font-size: 1rem;
    margin-top: 1.5rem;
}

form[action*="ungapped.io"] label,
form[action*="ungpd.com"] label {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
}

form[action*="ungapped.io"] br+label,
form[action*="ungpd.com"] br+label,
form[action*="ungapped.io"] br+input[type=hidden]+label,
form[action*="ungpd.com"] br+input[type=hidden]+label {
    margin-top: 1rem;
}

form[action*="ungapped.io"] label+br+label,
form[action*="ungpd.com"] label+br+label {
    margin-top: -0.5rem;
}

form[action*="ungapped.io"] input[type="text"],
form[action*="ungpd.com"] input[type="text"],
form[action*="ungapped.io"] input[type="email"],
form[action*="ungpd.com"] input[type="email"],
form[action*="ungapped.io"] input[type="number"],
form[action*="ungpd.com"] input[type="number"] {
    width: 100%;
}

form[action*="ungapped.io"] label:has(input[type="checkbox"]),
form[action*="ungpd.com"] label:has(input[type="checkbox"]),
form[action*="ungapped.io"] label:has(input[type="radio"]),
form[action*="ungpd.com"] label:has(input[type="radio"]) {
    padding-left: 1.5em;
}

form[action*="ungapped.io"] label+br+label:has(input[type="checkbox"]),
form[action*="ungpd.com"] label+br+label:has(input[type="checkbox"]),
form[action*="ungapped.io"] label+br+label:has(input[type="radio"]),
form[action*="ungpd.com"] label+br+label:has(input[type="radio"]) {
    margin-top: -1.5em;
}

form[action*="ungapped.io"] input[type="checkbox"],
form[action*="ungpd.com"] input[type="checkbox"],
form[action*="ungapped.io"] input[type="radio"],
form[action*="ungpd.com"] input[type="radio"] {
    appearance: none;
    background-color: var(--bs-body-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 2px;
    border: 1px solid var(--color-form-control);
    float: left;
    height: 17px;
    margin-left: -1.5em;
    margin-right: 0.75em;
    margin-top: 0.25em;
    padding: 7.5px;
    print-color-adjust: exact;
    vertical-align: top;
    width: 17px;
}

form[action*="ungapped.io"] input[type="checkbox"]:checked,
form[action*="ungpd.com"] input[type="checkbox"]:checked,
form[action*="ungapped.io"] input[type="radio"]:checked,
form[action*="ungpd.com"] input[type="radio"]:checked {
    background-color: var(--color-link);
    border-color: var(--color-link);
}

@media (prefers-color-scheme: dark) {
    form[action*="ungapped.io"] input[type="checkbox"]:checked,
    form[action*="ungpd.com"] input[type="checkbox"]:checked,
    form[action*="ungapped.io"] input[type="radio"]:checked,
    form[action*="ungpd.com"] input[type="radio"]:checked {
        background-color: #8d7e60 !important;
        border-color: #ffffff !important;
    }
}

form[action*="ungapped.io"] input[type="checkbox"]:checked,
form[action*="ungpd.com"] input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

form[action*="ungapped.io"] input[type="radio"]:checked,
form[action*="ungpd.com"] input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

form[action*="ungapped.io"] input[type="radio"],
form[action*="ungpd.com"] input[type="radio"] {
    border-radius: 50%;
}

form[action*="ungapped.io"] input[type="checkbox"]+span,
form[action*="ungpd.com"] input[type="checkbox"]+span,
form[action*="ungapped.io"] input[type="radio"]+span,
form[action*="ungpd.com"] input[type="radio"]+span {
    display: block;
    margin-left: 5px;
    max-width: 50ch;
    width: calc(100% - 20px);
}

form[action*="ungapped.io"] button[type="submit"],
form[action*="ungpd.com"] button[type="submit"] {
    margin-top: 1rem;
}

form[action*="ungapped.io"] br+button[type="submit"],
form[action*="ungpd.com"] br+button[type="submit"] {
    margin-top: -2rem;
}