/* ==========================================
   CDL — FANCY EMOJI UNICODE FRAMEWORK
   CORE UTILITIES
   Version: 1.0.0
   ========================================== */


/* ==========================================
   DISPLAY
   ========================================== */

.cdl-hidden {
    display: none !important;
}

.cdl-block {
    display: block !important;
}

.cdl-inline {
    display: inline !important;
}

.cdl-inline-block {
    display: inline-block !important;
}

.cdl-flex {
    display: flex !important;
}

.cdl-inline-flex {
    display: inline-flex !important;
}

.cdl-grid {
    display: grid !important;
}


/* ==========================================
   FLEX
   ========================================== */

.cdl-flex-row {
    flex-direction: row !important;
}

.cdl-flex-column {
    flex-direction: column !important;
}

.cdl-flex-wrap {
    flex-wrap: wrap !important;
}

.cdl-flex-nowrap {
    flex-wrap: nowrap !important;
}

.cdl-items-start {
    align-items: flex-start !important;
}

.cdl-items-center {
    align-items: center !important;
}

.cdl-items-end {
    align-items: flex-end !important;
}

.cdl-items-stretch {
    align-items: stretch !important;
}

.cdl-justify-start {
    justify-content: flex-start !important;
}

.cdl-justify-center {
    justify-content: center !important;
}

.cdl-justify-end {
    justify-content: flex-end !important;
}

.cdl-justify-between {
    justify-content: space-between !important;
}

.cdl-justify-around {
    justify-content: space-around !important;
}

.cdl-justify-evenly {
    justify-content: space-evenly !important;
}


/* ==========================================
   GAP
   ========================================== */

.cdl-gap-0 {
    gap: 0 !important;
}

.cdl-gap-xs {
    gap: var(--cdl-space-xs) !important;
}

.cdl-gap-sm {
    gap: var(--cdl-space-sm) !important;
}

.cdl-gap-md {
    gap: var(--cdl-space-md) !important;
}

.cdl-gap-lg {
    gap: var(--cdl-space-lg) !important;
}

.cdl-gap-xl {
    gap: var(--cdl-space-xl) !important;
}

.cdl-gap-2xl {
    gap: var(--cdl-space-2xl) !important;
}


/* ==========================================
   WIDTH
   ========================================== */

.cdl-w-auto {
    width: auto !important;
}

.cdl-w-full {
    width: 100% !important;
}

.cdl-w-fit {
    width: fit-content !important;
}

.cdl-max-w-none {
    max-width: none !important;
}

.cdl-max-w-sm {
    max-width: var(--cdl-container-sm) !important;
}

.cdl-max-w-md {
    max-width: var(--cdl-container-md) !important;
}

.cdl-max-w-lg {
    max-width: var(--cdl-container-lg) !important;
}

.cdl-max-w-xl {
    max-width: var(--cdl-container-xl) !important;
}


/* ==========================================
   MARGIN
   ========================================== */

.cdl-m-0 {
    margin: 0 !important;
}

.cdl-m-auto {
    margin: auto !important;
}

.cdl-mt-0 {
    margin-top: 0 !important;
}

.cdl-mt-auto {
    margin-top: auto !important;
}

.cdl-mb-0 {
    margin-bottom: 0 !important;
}

.cdl-mb-auto {
    margin-bottom: auto !important;
}

.cdl-ml-auto {
    margin-left: auto !important;
}

.cdl-mr-auto {
    margin-right: auto !important;
}


/* ==========================================
   PADDING
   ========================================== */

.cdl-p-0 {
    padding: 0 !important;
}

.cdl-p-xs {
    padding: var(--cdl-space-xs) !important;
}

.cdl-p-sm {
    padding: var(--cdl-space-sm) !important;
}

.cdl-p-md {
    padding: var(--cdl-space-md) !important;
}

.cdl-p-lg {
    padding: var(--cdl-space-lg) !important;
}

.cdl-p-xl {
    padding: var(--cdl-space-xl) !important;
}


/* ==========================================
   TEXT ALIGNMENT
   ========================================== */

.cdl-text-left {
    text-align: left !important;
}

.cdl-text-center {
    text-align: center !important;
}

.cdl-text-right {
    text-align: right !important;
}


/* ==========================================
   FONT WEIGHT
   ========================================== */

.cdl-font-normal {
    font-weight: 400 !important;
}

.cdl-font-medium {
    font-weight: 500 !important;
}

.cdl-font-semibold {
    font-weight: 600 !important;
}

.cdl-font-bold {
    font-weight: 700 !important;
}

.cdl-font-extrabold {
    font-weight: 800 !important;
}


/* ==========================================
   TEXT COLOR
   ========================================== */

.cdl-text-primary {
    color: var(--cdl-clr-text) !important;
}

.cdl-text-secondary {
    color: var(--cdl-clr-text-secondary) !important;
}

.cdl-text-muted {
    color: var(--cdl-clr-text-muted) !important;
}

.cdl-text-inverse {
    color: var(--cdl-clr-text-inverse) !important;
}


/* ==========================================
   BACKGROUND
   ========================================== */

.cdl-bg-transparent {
    background: transparent !important;
}

.cdl-bg-primary {
    background: var(--cdl-clr-primary) !important;
}

.cdl-bg-surface {
    background: var(--cdl-clr-surface) !important;
}

.cdl-bg-page {
    background: var(--cdl-clr-background) !important;
}


/* ==========================================
   BORDER
   ========================================== */

.cdl-border-none {
    border: 0 !important;
}

.cdl-border {
    border: 1px solid var(--cdl-clr-border) !important;
}

.cdl-border-top {
    border-top: 1px solid var(--cdl-clr-border) !important;
}

.cdl-border-bottom {
    border-bottom: 1px solid var(--cdl-clr-border) !important;
}


/* ==========================================
   BORDER RADIUS
   ========================================== */

.cdl-radius-none {
    border-radius: 0 !important;
}

.cdl-radius-sm {
    border-radius: var(--cdl-radius-sm) !important;
}

.cdl-radius-md {
    border-radius: var(--cdl-radius-md) !important;
}

.cdl-radius-lg {
    border-radius: var(--cdl-radius-lg) !important;
}

.cdl-radius-full {
    border-radius: 9999px !important;
}


/* ==========================================
   POSITION
   ========================================== */

.cdl-relative {
    position: relative !important;
}

.cdl-absolute {
    position: absolute !important;
}

.cdl-fixed {
    position: fixed !important;
}

.cdl-sticky {
    position: sticky !important;
}


/* ==========================================
   OVERFLOW
   ========================================== */

.cdl-overflow-hidden {
    overflow: hidden !important;
}

.cdl-overflow-auto {
    overflow: auto !important;
}

.cdl-overflow-x-auto {
    overflow-x: auto !important;
}

.cdl-overflow-y-auto {
    overflow-y: auto !important;
}


/* ==========================================
   VISIBILITY
   ========================================== */

.cdl-visible {
    visibility: visible !important;
}

.cdl-invisible {
    visibility: hidden !important;
}


/* ==========================================
   OPACITY
   ========================================== */

.cdl-opacity-0 {
    opacity: 0 !important;
}

.cdl-opacity-50 {
    opacity: 0.5 !important;
}

.cdl-opacity-75 {
    opacity: 0.75 !important;
}

.cdl-opacity-100 {
    opacity: 1 !important;
}


/* ==========================================
   POINTER
   ========================================== */

.cdl-pointer {
    cursor: pointer !important;
}

.cdl-not-allowed {
    cursor: not-allowed !important;
}


/* ==========================================
   USER SELECT
   ========================================== */

.cdl-select-none {
    user-select: none !important;
}

.cdl-select-text {
    user-select: text !important;
}

.cdl-select-all {
    user-select: all !important;
}


/* ==========================================
   IMAGE
   ========================================== */

.cdl-img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ==========================================
   SCREEN READER
   ========================================== */

.cdl-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==========================================
   CONTAINER
   ========================================== */

.cdl-container {
    width: 100%;
    max-width: var(--cdl-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cdl-container-padding);
    padding-right: var(--cdl-container-padding);
}


/* ==========================================
   CONTENT WIDTH
   ========================================== */

.cdl-content {
    width: 100%;
    max-width: var(--cdl-content-width);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   STACK
   ========================================== */

.cdl-stack {
    display: flex;
    flex-direction: column;
}

.cdl-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--cdl-space-sm);
}

.cdl-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--cdl-space-md);
}

.cdl-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--cdl-space-lg);
}


/* ==========================================
   INLINE STACK
   ========================================== */

.cdl-inline-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.cdl-inline-stack-sm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cdl-space-sm);
}

.cdl-inline-stack-md {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cdl-space-md);
}


/* ==========================================
   RESPONSIVE HELPERS
   ========================================== */

@media (max-width: 767px) {

    .cdl-mobile-hidden {
        display: none !important;
    }

    .cdl-mobile-block {
        display: block !important;
    }

    .cdl-mobile-flex {
        display: flex !important;
    }

    .cdl-mobile-column {
        flex-direction: column !important;
    }

    .cdl-mobile-text-center {
        text-align: center !important;
    }

}


@media (min-width: 768px) {

    .cdl-desktop-hidden {
        display: none !important;
    }

    .cdl-desktop-flex {
        display: flex !important;
    }

}


/* ==========================================
   CDL UTILITIES READY
   ========================================== */

















   .cdl-skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 99999;

    padding: 10px 14px;

    border-radius: 8px;

    background:
        var(
            --cdl-clr-text-strong,
            #000000
        );

    color:
        var(
            --cdl-clr-text-inverse,
            #ffffff
        );

    text-decoration: none;

    transform:
        translateY(-150%);

    transition:
        transform
        var(
            --cdl-transition-fast,
            200ms ease
        );
}

.cdl-skip-link:focus,
.cdl-skip-link:focus-visible {
    transform:
        translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .cdl-skip-link {
        transition: none;
    }

}