:root {
    --skeleton-outer: #e5e7eb; /* Light gray for skeleton outer layer */
    --skeleton-inner: #f3f4f6; /* Lighter gray for skeleton inner layer */

    --border-error: red;
    --border-warning: #fbbf24; /* Yellow */
    --border-base: #e5e7eb; /* Light gray */
    --border-muted: #a1a1a1; /* Muted gray for less important elements */
    --border-primary: #3b82f6; /* Blue for primary actions */
    --border-secondary: #d1d5db; /* Light gray for secondary elements */

    --bg-base-subtle: #f9fafb; /* Very light gray */
    --bg-error-subtle: #fff5f5; /* Very light red */
    --bg-warning-subtle: #fff9db; /* Very light yellow */
    --bg-muted-subtle: #ddd; /* Subtle gray for muted elements */
    --bg-primary-subtle: #dbeafe; /* Very light blue for primary actions */
    --bg-secondary-subtle: #f3f4f6; /* Very light gray for secondary elements */

    --bg-base: white;
    --bg-error: #ffe5e5; /* Light red */
    --bg-warning: #fff9db; /* Light yellow */
    --bg-muted: #c1c1c1; /* Muted gray for less important elements */
    --bg-primary: #3b82f6; /* Blue for primary actions */
    --bg-secondary: #f3f4f6; /* Light gray for secondary elements */

    --text-base: #111; /* Dark text for high contrast */
    --text-muted: #6b7280; /* Muted text for less important information */
    --text-inverted: white; /* Inverted text for dark backgrounds */
}

.skeleton-outer {
    background-color: var(--skeleton-outer);
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
}

.skeleton-inner {
    background-color: var(--skeleton-inner);
    height: 100%;
    width: 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

div.icon-input {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
    border-radius: 0.25rem;
    align-items: center;
}

div.icon-input > span {
    pointer-events: none;
    user-select: none;
    padding: 0 0.25rem;
    margin: 0 0.25rem;
    height: 100%;
}

/* Inputs can be changed using actions, so there is special CSS to handle that */
div.icon-input, input {
    background-color: var(--bg-base-subtle);
    border: 1px solid var(--border-base);
    color: var(--text-base);
}

div.icon-input[disabled], input[disabled] {
    background-color: var(--bg-muted-subtle);
    border: 1px solid var(--border-muted);
    color: var(--text-base);
    opacity: 0.6;
}

div.icon-input[derived], input[derived] {
    background-color: var(--bg-warning-subtle);
    border: 1px solid var(--border-warning);
    color: var(--text-base);
    opacity: 0.6;
}

div.icon-input[derived][disabled], input[derived][disabled] {
    background-color: var(--bg-primary-subtle);
    border: 1px solid var(--border-primary);
    color: var(--text-base);
    cursor: not-allowed;
}

label {
    font-weight: 500;
    margin: 0;
    padding: 0;
}

input,.dropdown-toggle {
    &:focus {
        outline: none!important;
        outline-width: 0!important;
        box-shadow: 2px var(--border-muted)!important;
    }
}

.hide {
    display: none;
}

.show {
    display: block;
}

/* Extra small devices (xs) */
@media (max-width: 639px) {
    .show-xs {
        display: block;
    }

    .hide-xs {
        display: none;
    }
}

/* Small devices (sm) */
@media (min-width: 640px) and (max-width: 767px) {
    .show-sm {
        display: block;
    }

    .hide-sm {
        display: none;
    }
}

/* Medium devices (md) */
@media (min-width: 768px) and (max-width: 1023px) {
    .show-md {
        display: block;
    }

    .hide-md {
        display: none;
    }
}

/* Large devices (lg and up) */
@media (min-width: 1024px) {
    .show-lg {
        display: block;
    }

    .hide-lg {
        display: none;
    }
}