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

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

    Note that these rules are primarily used for styling the assistant module at the moment, but
    they may also apply to other modules. In such cases, the rules might need to be extended or
    adjusted to fit the needs of a specific module.

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

    There is a known bug in Sitevision's CSS compressor: it removes spaces
    between selectors, even when the space is a CSS descendant combinator.
    This file uses selectors like ".parent :is(h2, h3)" where the space
    before :is() means "h2 or h3 inside .parent". Without that space it
    becomes ".parent:is(h2, h3)" — a completely different selector. Once
    Sitevision fixes this bug, compression can be re-enabled for this file.

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

/* Layout */
.env-flex--direction-column {
    gap: 0.25rem;
}

/* Typography */
h2.env-ui-text-heading {
    font-weight: 500;
}

.env-list {
    max-width: none;
}

p.env-text:last-child {
    margin-bottom: 0;
}

.env-link {
    color: var(--color-link) !important;
}

.env-link:hover {
    color: var(--color-link-hover) !important;
}

@media (prefers-color-scheme: dark) {
   .env-link:hover {
        color: var(--color-link-hover-dark-mode) !important;
    }
}

.env-link.env-d--block {
    width: fit-content;
}

/* Form elements */
.env-button {
    text-align: left !important;
    min-width: 44px;
}

.env-button:not(.env-button--primary):not(.env-button--secondary),
.env-button:not(.env-button--primary):not(.env-button--secondary):focus {
    background-color: transparent;
    color: var(--color-text);
}

.env-button:not(.env-button--primary):not(.env-button--secondary):hover {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
    color: var(--color-white);
}

.env-button.env-button--icon:not(.env-button--icon-after):not(.env-button--icon-before):not(.env-button--icon-around):not(.env-button--icon-above) {
    padding: calc(2.75em - 6px) 0 0;
}

.env-button--icon-before {
    padding: .45rem 0.8rem .45rem 2.5rem !important;
}

.env-button--icon-before>svg {
    inset-inline-start: 1rem !important;
}

.env-form-element :is(input, textarea, button):focus {
    outline-offset: -1px;
    outline: 3px solid var(--color-focus) !important;
}

.env-form-element__control textarea:has(+button[type="submit"]) {
    border-radius: 0 5px 5px 0 !important;
    padding-left: 2.25rem !important;
}

.env-form-element__control textarea+button[type="submit"] {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    margin-right: -0.5rem !important;
    margin-top: -0.5px;
    padding: 1.19rem !important;
}

.env-form-element__control textarea+button[type="submit"]:hover {
    background-color: var(--color-button-hover) !important;
    border-color: var(--color-button-hover) !important;
    color: var(--color-white) !important;
}

.env-button:disabled,
.env-button:disabled:hover,
.env-button:disabled:focus {
    background-color: transparent !important;
    border-color: transparent !important;
}

.env-form-element__control textarea+button[type="submit"]:disabled {
    background-color: var(--color-button) !important;
    border-color: var(--color-button) !important;
    color: var(--color-white) !important;
}

/* Popover */

.env-popover--tooltip {
    padding: 0.1rem 0.5rem !important;
}

.env-popover--tooltip p {
    font-size: 0.875rem;
    margin: 0;
}