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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

.fex-bg-primary {
    background: var(--fex-color-primary) !important;
}

.fex-bg-surface {
    background: var(--fex-color-surface) !important;
}

.fex-bg-page {
    background: var(--fex-color-background) !important;
}


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

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

.fex-border {
    border: 1px solid var(--fex-color-border) !important;
}

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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


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

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

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


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

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

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

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


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

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


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

.fex-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
   ========================================== */

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


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

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


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

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

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

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

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


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

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

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

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


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

@media (max-width: 767px) {

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

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

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

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

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

}


@media (min-width: 768px) {

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

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

}


/* ==========================================
   FEX UTILITIES READY
   ========================================== */

















   .fex-skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 99999;

    padding: 10px 14px;

    border-radius: 8px;

    background:
        var(
            --fex-color-text-strong,
            #000000
        );

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

    text-decoration: none;

    transform:
        translateY(-150%);

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

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

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

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

}