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

    This file contains rules for
    STAFF GATEWAY GUIDE
    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.

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

/* Padding for select in staff gateway guide */
.staff-gateway-guide-select {
    padding: 0.575rem 2.25rem 0.575rem 0.75rem;
}

/* Set color of text in select */
.staff-gateway-guide-select.text-muted {
    color: var(--color-text-muted);
}

/* Container for options in select */
.staff-gateway-guide-options-container {
    position: relative;
}

/* Options in select */
.staff-gateway-guide-options {
    background-color: var(--color-white);
    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) {
    .staff-gateway-guide-options {
        max-height: 20rem;
    }
}

/* Design of scrollbar in select */
.staff-gateway-guide-options::-webkit-scrollbar {
    width: 11px;
}

.staff-gateway-guide-options::-webkit-scrollbar-track {
    background: var(--color-grey-light);
}

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

/* Check button for each option in select */
.staff-gateway-guide-check {
    margin-bottom: 0.5rem;
}

.staff-gateway-guide-check:last-child {
    margin-bottom: 0;
}

/* Make sure pointer is used when hovering over options in select */
.staff-gateway-guide-check * {
    cursor: pointer;
}

/* We do not want the standard blue color for the check button */
.staff-gateway-guide-option:checked {
    background-color: var(--color-active-grey);
    border-color: var(--color-active-grey);
}

/* Style of button for clearing settings in staff gateway guide */
.staff-gateway-guide-button-clear-settings:hover::after {
    background-color: var(--color-black);
    border-color: transparent;
    filter: invert(0);
    transition: background-color 0.5s ease;
  }