@import "./styling/index.css";

/*
NOTE: Importing all the components CSS files in a root file is not our preferred solution. Ideally, every components would import is own CSS file.
Sadly, we encountered CSS ordering issues when the components are bundled in our apps.
*/

/* Must be imported first */
@import "./html/index.css";
@import "./input/index.css";

@import "./accordion/index.css";
@import "./alert/index.css";
@import "./autocomplete/index.css";
@import "./avatar/index.css";
@import "./badge/index.css";
@import "./button/index.css";
@import "./card/index.css";
@import "./checkbox/index.css";
@import "./counter/index.css";
@import "./date-input/index.css";
@import "./dialog/index.css";
@import "./disclosure/index.css";
@import "./divider/index.css";
@import "./dot/index.css";
@import "./field/index.css";
@import "./form/index.css";
@import "./icons/index.css";
@import "./illustrated-message/index.css";
@import "./illustration/index.css";
@import "./image/index.css";
@import "./input-group/index.css";
@import "./link/index.css";
@import "./listbox/index.css";
@import "./loader/index.css";
@import "./lozenge/index.css";
@import "./menu/index.css";
@import "./message/index.css";
@import "./modal/index.css";
@import "./number-input/index.css";
@import "./overlay/index.css";
@import "./popover/index.css";
@import "./radio/index.css";
@import "./select/index.css";
@import "./spinner/index.css";
@import "./switch/index.css";
@import "./tabs/index.css";
@import "./tag/index.css";
@import "./text-area/index.css";
@import "./text-input/index.css";
@import "./tile/index.css";
@import "./tooltip/index.css";
@import "./typography/index.css";
@import "./visually-hidden/index.css";

.o-ui {
    /* STATES | DISABLED */
    --o-ui-disabled-opacity: 0.4;

    /* FOCUS RING */
    --o-ui-focus-ring-thickness-sm: 1px;
    --o-ui-focus-ring-thickness-md: 3px;
    --o-ui-focus-ring-thickness-lg: 5px;

    --o-ui-focus-ring-inset-sm: 0 0 0 var(--o-ui-focus-ring-thickness-sm) var(--o-ui-focus-ring-color-alias-default);
    --o-ui-focus-ring-inset-md: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default);
    --o-ui-focus-ring-inset-lg: 0 0 0 var(--o-ui-focus-ring-thickness-lg) var(--o-ui-focus-ring-color-alias-default);
    --o-ui-focus-ring-outset-inner-offset: 1px;
    --o-ui-focus-ring-outset: 0 0 0 var(--o-ui-focus-ring-outset-outer-offset) var(--o-ui-white), 0 0 0 calc(2px + var(o-ui-focus-ring-outset-outer-offset)) var(--o-ui-focus-ring-color-alias-default);
    --o-ui-focus-ring-transition: all var(--o-ui-easing-duration-1) var(--o-ui-easing-focus);

    /* TRANSITIONS | TIMING */
    --o-ui-easing-duration-1: .1s;
    --o-ui-easing-duration-2: .2s;
    --o-ui-easing-duration-3: .3s;
    --o-ui-easing-duration-4: .5s;
    --o-ui-easing-duration-5: .8s;

    /* TRANSITIONS | EASING */
    --o-ui-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
    --o-ui-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    --o-ui-easing-expressive: cubic-bezier(0.58, 0.01, 0.15, 1.5);

    /* DEFAULTS */
    color: var(--o-ui-text-alias-primary);
}

/* ANIMATIONS */
.o-ui-fade-in {
    animation: o-ui-fade-in-animation var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
}

.o-ui-fade-out {
    animation: o-ui-fade-out-animation var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
    opacity: 0;
}

@keyframes o-ui-fade-in-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes o-ui-fade-out-animation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}