@layer components {

    .btn-primary {
        @apply rounded-md px-4 py-2 transition-colors;
        background-color: var(--color-primary);
        color: white;
    }

    .btn-primary:hover {
        background-color: var(--color-primary-hover);
    }

    .text-default {
        color: var(--text-primary);
    }

    .card {
        @apply rounded-md p-4;
        background-color: var(--bg-primary);
        border: 1px solid var(--border-primary);
        box-shadow: var(--shadow-sm);
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .form-label {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--text-primary);
    }

    .status-message {
        @apply py-8 text-center;
        color: var(--text-secondary);
        flex: 1;
    }

    .empty-message {
        padding: var(--spacing-md);
        color: var(--text-secondary);
    }

    .error-message {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-danger);
        color: var(--color-danger);
        text-align: center;
    }
    table {
        background-color: var(--bg-primary);

        th {
            padding: var(--spacing-md) var(--spacing-md);
            text-align: left;
            background-color: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            white-space: nowrap;
        }

        tr {
            &:not(:first-child) {
                border-top: 1px solid var(--border-primary);
            }
        }

        td {
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-primary);
        }
    }
    .link {
        color: var(--color-primary);
        cursor: pointer;

        &:hover {
            color: var(--color-primary-hover);
        }
    }

    .bg-primary {
        background-color: var(--color-primary);
    }
    .bg-primary-100 {
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
    .bg-primary-200 {
        background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    }
    .bg-primary-300 {
        background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    }
    .bg-primary-400 {
        background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    }

    .bg-secondary {
        background-color: var(--color-secondary);
    }
    .bg-secondary-100 {
        background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
    }
    .bg-secondary-200 {
        background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
    }
    .bg-secondary-300 {
        background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
    }
    .bg-secondary-400 {
        background-color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
    }
}
/* :root {
    --transition-normal: 0.2s ease-in-out;
}

.reduced-animations {
    --transition-normal: 0s !important;
}

.reduced-animations * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
} */

.raw-html {
    font-size: var(--text-sm);

    p {
        margin-bottom: var(--spacing-xs);
        &:last-child {
            margin-bottom: 0;
        }
    }

    ul,
    ol {
        margin: var(--spacing-xs) 0;
        padding-left: var(--spacing-md);

        li {
            margin-bottom: var(--spacing-xs);
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    a {
        color: var(--color-primary);
        text-decoration: underline;

        &:hover {
            color: var(--color-primary-hover);
        }
    }
}

.table-rows-animate {
    &-move,
    &-enter-active,
    &-leave-active {
        transition: all 0.5s ease;
    }

    &-enter-from,
    &-leave-to {
        opacity: 0;
        transform: translateY(30px);
    }

    &-leave-active {
        position: absolute;
        width: 100%;
    }
}
.table-columns-animate {
    &-move {
        transition: transform 0.5s ease;
    }

    &-enter-active,
    &-leave-active {
        transition: all 0.5s ease;
    }

    &-enter-from {
        opacity: 0;
        transform: translateX(30px);
    }

    &-leave-to {
        opacity: 0;
        transform: translateX(-30px);
    }

    &-leave-active {
        position: absolute;
        height: 100%;
    }
    &-leave-active,
    &-enter-active {
        will-change: opacity, transform;
    }
    &-leave-active {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
}
.reduced-animations {
    .table-rows-animate,
    .table-columns-animate {
        &-move,
        &-enter-active,
        &-leave-active {
            transition: none !important;
        }

        &-enter-from,
        &-leave-to {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }

        &-leave-active {
            position: relative;
            width: 100%;
            height: auto;
            z-index: auto;
        }
    }
}
.no-wrap {
    white-space: nowrap;
}
.no-data {
    align-content: center;
    text-align: center;
}
.modal-content-wrapper .modal-content .no-data {
    min-height: 240px;
}