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

@font-face {
    font-family: "FontinSmallCaps";
    src: url("https://assets.pobb.in/1/Art/2DArt/Fonts/Fontin-SmallCaps.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@layer components {
    .btn {
        @apply hover:cursor-pointer px-6 py-2 inline-flex justify-center rounded-lg text-sm font-semibold
            disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply bg-sky-600 hover:bg-sky-500 text-slate-200 hover:text-slate-50;
    }

    .btn-secondary {
        @apply bg-slate-500 hover:bg-slate-600 text-slate-200;
    }

    .input {
        @apply bg-slate-500 w-full px-2 py-1 rounded-sm outline-none
            read-only:text-slate-400 read-only:bg-slate-700;
    }

    .modal-right {
        @apply fixed z-10 top-0 right-0 bottom-0 
            translate-x-[calc(100%+10px)] transition-transform duration-500
            bg-slate-900 opacity-90 shadow-lg shadow-sky-500
            left-0 md:left-auto md:w-[500px];
    }

    .asc-image {
        @apply w-[50px] h-[50px] object-cover;
    }
}

.pob-item[data-rarity="White"] {
    --separator: url("https://assets.pobb.in/1/Art/2DArt/UIImages/InGame/ItemsSeparatorWhite.webp");
}
.pob-item[data-rarity="Magic"] {
    --separator: url("https://assets.pobb.in/1/Art/2DArt/UIImages/InGame/ItemsSeparatorMagic.webp");
}
.pob-item[data-rarity="Rare"] {
    --separator: url("https://assets.pobb.in/1/Art/2DArt/UIImages/InGame/ItemsSeparatorRare.webp");
}
.pob-item[data-rarity="Unique"] {
    --separator: url("https://assets.pobb.in/1/Art/2DArt/UIImages/InGame/ItemsSeparatorUnique.webp");
}
.pob-item[data-rarity="Foil"] {
    --separator: url("https://assets.pobb.in/1/Art/2DArt/UIImages/InGame/ItemsSeparatorFoil.webp");
}

.pob-item ul:not(:last-child):after {
    content: ' ';
    display: block;
    background: var(--separator) center no-repeat;
    height: 8px;
    margin: 2px 0;
}

.dark {
    color-scheme: dark;
}

[data-slot^="Weapon 1"] > svg {
    transform: scale(-1, 1);
}
[data-slot$="Swap"] > svg {
    opacity: 0.55;
}
[data-slot="Ring 1"] > svg {
    transform: rotateZ(-45deg);
}
[data-slot="Ring 2"] > svg {
    transform: rotateZ(45deg);
}

.gem-first::before {
    content: '\a0';
    width: 0.5rem;
    display: inline-block;
    height: 0.75rem;
    margin-left: 0.5rem;
    background: conic-gradient(from 90deg at 1px 1px, rgba(0, 0, 0, 0) 90deg, currentColor 0) 0px 0.69rem;
    transform: scaleY(-1) translateY(-0.69rem);
}

.gem-middle::before {
    content: '\a0';
    width: 0.5rem;
    display: inline-block;
    margin-left: 0.5rem;
    background: conic-gradient(from 90deg at 1px 1px, rgba(0, 0, 0, 0) 90deg, currentColor 0) 0px 0.69rem;
}

.gem-last::before {
    content: '\a0';
    width: 0.5rem;
    display: inline-block;
    height: 0.75rem;
    margin-left: 0.5rem;
    background: conic-gradient(from 90deg at 1px 1px, rgba(0, 0, 0, 0) 90deg, currentColor 0) 0px 0.69rem;
}

.inventory {
    --col-size: 4rem;
    --border-radius: 10px;

    display: grid;
    grid-template-columns: repeat(8, minmax(0, var(--col-size)));
    grid-gap: 0.5rem;
    grid-template-areas:
        "Weapon  Weapon .       Helm       Helm       .      Offhand Offhand"
        "Weapon  Weapon .       Helm       Helm       .      Offhand Offhand"
        "Weapon  Weapon .       BodyArmour BodyArmour Amulet Offhand Offhand"
        "Weapon  Weapon RingL   BodyArmour BodyArmour RingR  Offhand Offhand"
        ".       Gloves Gloves  BodyArmour BodyArmour Boots  Boots   ."
        ".       Gloves Gloves  Belt       Belt       Boots  Boots   ."
        "Trinket flasks flasks  flasks     flasks     flasks flasks  ."
        ".       flasks flasks  flasks     flasks     flasks flasks  .";
}

@layer components {
    .item {
        height: 100%;
        width: 100%;
        object-fit: scale-down;
        border-radius: var(--border-radius);
        padding: 5px;
        box-shadow: inset 0 0 12px 0 rgb(0 0 0 / 60%);
        user-select: none;
        @apply bg-slate-900;
    }
}
.weapon1 {
    grid-area: Weapon;
    aspect-ratio: 3;
}
.helmet {
    grid-area: Helm;
    aspect-ratio: 1;
}
.amulet {
    grid-area: Amulet;
    aspect-ratio: 1;
}
.weapon2 {
    grid-area: Offhand;
    aspect-ratio: 3;
}
.ring1 {
    grid-area: RingL;
    aspect-ratio: 1;
}
.body_armour {
    grid-area: BodyArmour;
    aspect-ratio: 3;
}
.ring2 {
    grid-area: RingR;
    aspect-ratio: 1;
}
.gloves {
    grid-area: Gloves;
    aspect-ratio: 1;
}
.belt {
    grid-area: Belt;
    aspect-ratio: 2;
}
.boots {
    grid-area: Boots;
    aspect-ratio: 1;
}
.flasks {
    grid-area: flasks;

    --border-radius: 5px;

    display: grid;
    margin: 0 auto;

    grid-template-columns: repeat(5, minmax(0, var(--col-size)));
    grid-gap: 0.5rem;
    grid-template-areas: "Flask0 Flask1 Flask2 Flask3 Flask4";
}
.flask1 {
    grid-area: Flask0;
    aspect-ratio: 0.5;
}
.flask2 {
    grid-area: Flask1;
    aspect-ratio: 0.5;
}
.flask3 {
    grid-area: Flask2;
    aspect-ratio: 0.5;
}
.flask4 {
    grid-area: Flask3;
    aspect-ratio: 0.5;
}
.flask5 {
    grid-area: Flask4;
    aspect-ratio: 0.5;
}
.socket {
    aspect-ratio: 1;
}
