@import '/cdn/npm/@fortawesome/fontawesome-free/css/all.min.css';

/*
 * these generic colorization classes are still being used in a few places
 * */

.ok {
    border-color: var( --green-9 );
    background-color: var( --green-1 );
}

.info {
    border-color: var( --indigo-9 );
    background-color: var( --indigo-1 );
}

.warn {
    border-color: var( --orange-9 );
    background-color: var( --orange-1 );
}

.danger {
    border-color: var( --red-9 );
    background-color: var( --red-1 );
}

.neutral {
    border-color: var( --gray-9 );
    background-color: var( --gray-1 );
}

.sk-red-text {
    color: red;
}

.muted {
    color: var( --gray-6 );
    font-size: 0.8rem;
}

/*
 * slightly nicer markup for vanilla inputs in absence of shoelace
 * */

button {
    border: 1px solid var( --gray-9 );
    background-color: var( --gray-1 );
    padding: var( --size-2 );
    border-radius: var( --radius-2 );
}

button:hover:enabled {
    filter: brightness( 125% );
}

button:active:enabled {
    transform: scale( 0.95 );
}

input {
    border: 1px solid var( --gray-9 );
    padding: var( --size-2 );
    border-radius: var( --radius-2 );
}

select {
    background-color: white;
    border: 1px solid var( --gray-9 );
    padding: var( --size-2 );
    border-radius: var( --radius-2 );
}

/*
 * reusable markup for repeated use cases
 * */

footer {
    display: flex;
    justify-content: space-between;
}

.hidden {
    visibility: hidden;
}

/*
 * globals
 * */

a:link {
    color: #145091;
}

a:visited {
    color: #5D0024;
}

a:hover {
    filter: brightness( 130% );
}

a:active {
    color: red;
}

dialog {
    overflow: hidden;
}

dialog::backdrop {
    background-image: radial-gradient(circle, rgba(20,80,145,1) 25%, rgba(99,101,107,1) 100%);
    opacity: 0.8;
    background-repeat: no-repeat;
}

/*
 * variables for all shadows
 * */

:host {
    --gradient-iv: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(20,80,145,1) 25%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 95%, rgba(99,101,107,1) 100%);
    --sl-toggle-size: var(--sl-toggle-size-medium);
}