@import "normal.css";
@import "_utils/variables.css";
@import "_utils/form.css";
@import "_utils/button.css";
@import "_utils/card.css";
@import "_utils/badge.css";
@import "_utils/content-style.css";
@import "_utils/skeleton.css";
@import "_utils/table.css";
@import "_utils/pagination.css";
@import "_utils/tooltip.css";
@import "_utils/drawer.css";

@layer base {

    :root {
        scroll-behavior: smooth;
    }

    * {
        scrollbar-color: rgb(0, 0, 0, 0.3) transparent;
        scrollbar-width: thin;
    }

    body {
        font-size: 1rem;
        font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
        color: #110f0d;
        background: #fdfbf9;
    }

    .container {
        max-width: 64rem;
        padding: 0 0.75rem;
        margin: 0 auto;
    }

    .scroll-x {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-x::-webkit-scrollbar {
        display: none;
    }

    .scroll-x > * {
        min-width: max-content
    }

    .scrollbar-hidden {
        overflow: hidden;
        width: calc(100vw - var(--scrollbar-width));
    }

    .tn {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .tn-none {
        transition-property: none
    }

    .tn-all {
        transition-property: all;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .tn-color {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .tn-opacity {
        transition-property: opacity;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .tn-shadow {
        transition-property: box-shadow;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .tn-form {
        transition-property: transform;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .underline {
        text-decoration: underline;
        text-underline-offset: .25em
    }

    .linethrough {
        text-decoration: line-through
    }

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .capitalize {
        text-transform: capitalize
    }

    .gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: #fff0
    }

    .abs-full {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0
    }

    .abs-auto {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        margin: auto
    }

    .abs-auto-x {
        position: absolute;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto
    }

    .abs-auto-y {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto
    }

    .abs-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%)
    }

    .abs-center-y {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }
}