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

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

    Note! Background images in this file is copied from Designsystemet.
    CSS rules from Designsystemet are compressed by Sitevision and
    because these background images have spaces in the URL, they are
    not working. This is a bug in Sitevision and when this bug is fixed,
    these rules for background images can be removed from this file.
    This file should not be compressed by Sitevision.

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

/* Admin buttons, we give them some more space by adding space above the form since they do not have
   any good id or class to target */
.sv-dbform-portlet form:not(:nth-child(2)) {
    margin-top: 1rem !important;
}

/* Tables in form */
.sv-defaultFormTheme table {
    background: none;
    margin-bottom: 0;
}

/* Form */
.sv-defaultFormTheme {
    margin-bottom: 1rem;
}

/* Label text */
.sv-defaultFormTheme .sv-field-title-container label,
.sv-defaultFormTheme .sv-field-title-container span,
.sv-defaultFormTheme .sv-form-userattributefield label,
.sv-defaultFormTheme .sv-form-subalternativefield label {
    font-weight: 400 !important;
    margin-bottom: 0.5rem;
}

.sv-defaultFormTheme .sv-field-title-container label span {
    margin-bottom: 0 !important;
}

.sv-defaultFormTheme .sv-form-datefield,
.sv-defaultFormTheme .sv-form-subalternativefield,
.sv-defaultFormTheme .sv-form-userattributefield {
    margin-top: 0.5rem !important;
}

.sv-defaultFormTheme .sv-form-singleselectionfield,
.sv-defaultFormTheme .sv-form-multipleselectionfield {
    padding-left: 1.5rem !important;
}

.sv-defaultFormTheme select.sv-form-singleselectionfield,
.sv-defaultFormTheme select.sv-form-multipleselectionfield {
    padding-left: 0.75rem !important;
}

.sv-defaultFormTheme .sv-form-participantsfield label {
    margin-right: 1rem;
}

/* Set max-width on the labels and spans in forms so they are easier to read */
.sv-dbform-portlet label,
.sv-dbform-portlet span,
.sv-defaultFormTheme label,
.sv-defaultFormTheme span,
.sv-form-portlet label,
.sv-form-portlet span,
.sv-html-portlet label,
.sv-signup-portlet label,
.sv-signup-portlet span {
    display: inline-block;
    max-width: 58ch;
}

/* Label mandatory asterisk */
.sv-defaultFormTheme label span {
    color: var(--color-danger);
    font-weight: 400 !important;
    margin-left: -0.25rem;
}

/* All fields */
.sv-defaultFormTheme .sv-formField,
.sv-defaultFormTheme .sv-form-userattributefield input {
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.sv-defaultFormTheme .sv-form-userattributefield {
    margin-bottom: -1rem !important;
}

.sv-defaultFormTheme input:focus,
.sv-defaultFormTheme input:focus-visible,
.sv-defaultFormTheme textarea:focus,
.sv-defaultFormTheme textarea:focus-visible,
.sv-defaultFormTheme select:focus,
.sv-defaultFormTheme select:focus-visible {
    border-color: var(--color-focus) !important;
    box-shadow: none !important;
    outline: 2px solid var(--color-focus) !important;
    outline-offset: 0 !important;
}

/* Input */
.sv-defaultFormTheme input[type="text"],
.sv-defaultFormTheme input[type="email"],
.sv-defaultFormTheme input[type="number"],
.sv-defaultFormTheme input[type="password"],
.sv-defaultFormTheme input[type="search"],
.sv-defaultFormTheme input[type="tel"],
.sv-defaultFormTheme input[type="url"],
.sv-defaultFormTheme textarea,
.sv-defaultFormTheme select {
    appearance: none;
    background-clip: padding-box;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid var(--color-form-control);
    color: var(--color-text);
    display: block;
    font-size: 1rem;
    font-weight: 400;
    height: auto;
    line-height: 1.5;
    padding: 0.575rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
}

.sv-defaultFormTheme input[type=submit]:focus,
.sv-defaultFormTheme .sv-formField input[type="button"]:focus {
    background-color: var(--color-button);
    border: 3px solid var(--color-button) !important;
    color: #fff;
    outline: 3px solid var(--color-focus) !important;
}

/* Inputs in user attribute fields should have more space between them, we do this by adding
   margin-right to their floating divs */
.sv-defaultFormTheme .sv-form-userattributefield .sv-float-left {
    margin-right: 0.775rem;
}

/* Radio and checkbox */
.sv-defaultFormTheme input[type="radio"],
.sv-defaultFormTheme input[type="checkbox"] {
    float: left;
    height: 1rem;
    margin-left: -1.5rem;
    margin-right: 0.4rem;
    margin-top: 0.25rem;
    width: 1rem;
}

/* Select */
.sv-defaultFormTheme select:not([multiple]) {
    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");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2rem;
}

.sv-defaultFormTheme select:not([multiple]):disabled {
    background-color: var(--color-disabled-bg);
    border: 1px solid var(--color-border);
    color: var(--color-disabled);
}

.sv-defaultFormTheme label+select:not([multiple]) {
    margin-right: 0.5rem;
}

.sv-defaultFormTheme .sv-form-participantsfield {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Description */
.sv-defaultFormTheme .sv-formField input+span:not(.sv-textfield-input-size),
.sv-defaultFormTheme .sv-formField textarea+span,
.sv-defaultFormTheme .sv-formField select+span,
.sv-defaultFormTheme .sv-formField fieldset+span,
.sv-defaultFormTheme .sv-formField .sv-form-subalternativefield~span,
.sv-defaultFormTheme .sv-formField .sv-form-participantsfield+span {
    --bs-text-opacity: 1;
    color: var(--color-text-muted);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Input size */
.sv-defaultFormTheme .sv-textfield-input-size {
    margin-bottom: -1rem;
}

/* Date field */
.sv-defaultFormTheme .sv-form-datefield {
    display: flex;
    flex-direction: column;
}

.sv-defaultFormTheme .sv-form-datefield .sv-float-left {
    float: none;
}

.sv-defaultFormTheme .sv-form-datefield .sv-float-left:nth-child(3) {
    margin-left: 0;
    margin-top: 0.75rem;
}

@media screen and (min-width: 768px) {
    .sv-defaultFormTheme .sv-form-datefield {
        flex-direction: row;
    }

    .sv-defaultFormTheme .sv-form-datefield .sv-float-left:nth-child(3) {
        margin-left: 1rem;
        margin-top: 0;
    }
}

/* Participants field */
.sv-defaultFormTheme .sv-form-participantsfield {
    margin-bottom: -0.35rem;
}

.sv-defaultFormTheme .sv-form-participantsfield td {
    padding-bottom: 0.75rem;
}

/* Grade field */
.sv-defaultFormTheme .sv-form-gradefield table {
    margin-bottom: 0.5rem;
}

.sv-defaultFormTheme .sv-form-gradefield table input {
    float: none;
    margin-left: 0;
}

/* Signup portlet */
.sv-signup-portlet div {
    background: none;
    border: none;
}

.sv-signup-portlet table {
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.sv-signup-portlet table td {
    padding-bottom: 0.75rem;
}

.sv-signup-portlet input[type="submit"][value="Logga in"],
.sv-signup-portlet input[type="submit"][value="Log in"] {
    margin-bottom: 2rem;
}

/* Consent */
.sv-defaultFormTheme .sv-form-consent input[type="checkbox"] {
    appearance: none;
    background-color: var(--bs-body-bg);
    border-radius: 2px;
    border: 1px solid var(--color-form-control);
    height: 16px;
    margin-left: 0;
    margin-top: 0.25rem;
    padding: 7.5px;
    width: 15px;
}

.sv-defaultFormTheme .sv-form-consent 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");
    background-color: var(--color-link);
    border-color: var(--color-link);
}

.sv-defaultFormTheme .sv-form-consent p {
    max-width: none;
}

/* If language is Swedish hide the p of the consent, otherwise hide the label */
body[lang="sv-SE"] .sv-defaultFormTheme .sv-form-consent label {
    display: none;
}

body:not([lang="sv-SE"]) .sv-defaultFormTheme .sv-form-consent p {
    display: none;
}

/* Submit and page buttons */
.sv-defaultFormTheme input[type="submit"],
.sv-signup-portlet input[type="submit"],
.sv-defaultFormTheme .sv-formField input[type="button"] {
    background-color: var(--color-button);
    border-radius: var(--border-radius);
    border: 3px solid var(--color-button);
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0.05em;
    padding: 0.45rem 0.8rem;
    text-align: left;
    text-decoration: none;
}

.sv-defaultFormTheme input[type="submit"]:hover,
.sv-signup-portlet input[type="submit"]:hover,
.sv-defaultFormTheme .sv-formField input[type="button"]:hover {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
    color: #fff;
}

/* Validation */
.sv-defaultFormTheme .sv-formField [role=alert] {
    color: var(--color-danger);
}

.sv-defaultFormTheme .sv-has-error input,
.sv-defaultFormTheme .sv-has-error textarea,
.sv-defaultFormTheme .sv-has-error select {
    background-color: var(--color-white) !important;
    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");
    background-position: right calc(0.375em + 0.1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    border-color: var(--color-danger);
    padding-right: calc(1.5em + 0.75rem);
}

.sv-defaultFormTheme .sv-has-error 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"),
        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");
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + .375rem) calc(0.75em + .375rem);
}

.sv-defaultFormTheme .sv-has-error textarea {
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
    padding-right: calc(1.5em + 0.75rem);
}

.sv-defaultFormTheme .sv-has-error input:focus,
.sv-defaultFormTheme .sv-has-error textarea:focus,
.sv-defaultFormTheme .sv-has-error select:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.sv-defaultFormTheme .sv-form-consent.sv-has-error {
    background-color: transparent !important;
    outline: 0;
}