@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }
[v-cloak] { display: none; }

:root {
    --prim-color: #ED000CFF;
    --sec-color: #ED000C1A;

    --prim-text-color: #1B1B1BFF;
    --sec-text-color: #9B9B9BFF;
    --reg-text-color: #666666FF;

    --border-color: #E0E0E0FF;

    --bg-color: #F6F6F6FF;
}

.singi-loading {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite singi-loading;
    animation: .75s linear infinite singi-loading;
}

input[type="checkbox"],input[type="radio"] {
    accent-color: var(--prim-color);
}

@keyframes singi-loading {
    100% {
        transform: rotate(360deg);
    }
}

@layer components {
    .prim-btn {
        @apply bg-[var(--prim-color)] flex items-center flex-shrink-0 h-[34px] rounded text-white text-sm px-4 py-[6px] cursor-pointer hover:bg-[#F1333DFF] active:bg-[#BE000AFF];
    }

    .prim-btn-sm {
        @apply prim-btn h-[28px];
    }

    .sec-btn {
        @apply flex items-center flex-shrink-0 text-[var(--prim-color)] border border-[var(--prim-color)] h-[34px] rounded hover:text-white text-sm px-4 py-[6px] cursor-pointer hover:bg-[#F1333DFF] active:bg-[#BE000AFF];
    }

    .sec-btn-sm {
        @apply sec-btn h-[28px];
    }

    .plain-btn {
        @apply bg-[var(--bg-color)] flex items-center flex-shrink-0 h-[34px] rounded hover:text-white text-sm px-4 py-[6px] cursor-pointer hover:bg-[#F1333DFF] active:bg-[#BE000AFF];
    }

    .plain-btn-sm {
        @apply plain-btn h-[28px];
    }

    .disabled {
        @apply bg-[#E09FA3FF] cursor-not-allowed pointer-events-none text-white border-none
    }

    .prim-bg-gradient {
        @apply bg-gradient-to-r from-[#ED000C1A] to-[#ED000C00]
    }

    .input {
        @apply bg-[var(--bg-color)] px-2 py-[6px] rounded-md outline-none
    }

    .modal-box-shadow {
        @apply [box-shadow:0px_0px_8px_0px_rgba(0,0,0,0.13)];
    }

    .profile-box-show {
        @apply [box-shadow:0px_8px_24px_0px_rgba(0,0,0,0.16)];
    }

    .rwd {
        @apply min-w-[1440px] overflow-auto
    }

    .rwd-w {
        @apply px-[8.3%] 3xl:px-0 3xl:max-w-[1600px] 3xl:w-[1600px]
    }
}