@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

@layer base {
    #shoteasy-container,.shoteasy-components {
        --c-wb: #c2c2c2;
        --c-wc: #fcfcfc;
        --c-bg: #fbfbfb;
        --c-br: #cecece;
        --c-se: #1900ff94;
        --c-scroll: #d9d9d9;
        --c-scroll-hover: #bbbbbb;
    }
    #shoteasy-container[data-mode="dark"],.shoteasy-components.dark-mode,.shoteasy-components [data-mode="dark"] {
        --c-wb: #444;
        --c-wc: #222;
        --c-bg: #2b2b2b;
        --c-br: #5e5e5e;
        --c-se: #5947fc;
        --c-scroll: #464646;
        --c-scroll-hover: #595858;
    }
    #shoteasy-container,.shoteasy-components {
        @apply [&_::-webkit-scrollbar]:w-1.5 [&_::-webkit-scrollbar]:h-1.5;
        @apply [&_::-webkit-scrollbar-thumb]:bg-[var(--c-scroll)] [&_::-webkit-scrollbar-thumb]:rounded-md;
        @apply hover:[&_::-webkit-scrollbar-thumb]:bg-[var(--c-scroll-hover)];
        @apply [&_::-webkit-scrollbar-track]:bg-[var(--c-bg)];
    }
}

@layer components {
    .polka {
        background-image: radial-gradient(var(--c-wb) 0.7px, var(--c-wc) 1px);
        background-size: 14px 14px;
    }
    .ant-radio-wrapper-checked .h-8, .ant-radio-wrapper-checked .h-14 {
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--c-se);
    }
    .position-block {
        @apply relative after:block after:transition-all after:w-8 after:h-8 after:rounded-md after:border after:border-blue-300 after:bg-blue-100 after:absolute after:z-10;
    }
    .position-block.top-left {
        @apply after:top-0 after:left-0;
    }
    .position-block.top {
        @apply after:top-0 after:left-8;
    }
    .position-block.top-right {
        @apply after:top-0 after:right-0;
    }
    .position-block.right {
        @apply after:top-8 after:right-0;
    }
    .position-block.bottom-right {
        @apply after:bottom-0 after:right-0;
    }
    .position-block.bottom {
        @apply after:bottom-0 after:left-8;
    }
    .position-block.bottom-left {
        @apply after:bottom-0 after:left-0;
    }
    .position-block.left {
        @apply after:top-8 after:left-0;
    }
    .position-block.center {
        @apply after:top-8 after:left-8;
    }
    .bg-transparent {
        background-image: 
                linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%), 
                linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%);
        background-position: 0 0, 5px 5px;
        background-size: 10px 10px;
    }
    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(0.5rem);
        }
        75% {
            transform: translateX(-0.5rem);
        }
        100% {
            transform: translateX(0);
        }
    }
    .invalid {
        animation: shake 0.2s ease-in-out 0s 2;
    }
}
