@import "../styles";

.m-badge.c-modal.--cover {
    &.--common {
        --rgb: var(--commonBadge-RGB);
        --rgb-fill: var(--commonBadgeFill-RGB);
        --rgb-shadow: var(--commonBadgeShadow-RGB);
    }
    &.--rare {
        --rgb: var(--rareBadge-RGB);
        --rgb-fill: var(--rareBadgeFill-RGB);
        --rgb-shadow: var(--rareBadgeShadow-RGB);
    }
    &.--ultimate {
        --rgb: var(--ultimateBadge-RGB);
        --rgb-fill: var(--ultimateBadgeFill-RGB);
        --rgb-shadow: var(--ultimateBadgeShadow-RGB);
    }
    &.--legendary {
        --rgb: var(--legendaryBadge-RGB);
        --rgb-fill: var(--legendaryBadgeFill-RGB);
        --rgb-shadow: var(--legendaryBadgeShadow-RGB);
    }

    background: rgba(34, 30, 49, 0.8);
    & .--modal-container {
        @apply pt-96 pb-48 px-48;
    }

    & .--modal-content {
        max-width: 740px;
        min-height: auto;
        background: rgba(34, 30, 49, 1);
        box-shadow: 0px 2px 24px 0 rgb(var(--rgb-shadow));

        @apply pt-48 pb-64 px-48;
        @apply relative;
        @apply overflow-visible;
        @apply rounded-8;

        @apply flex flex-col items-center;
    }
    & .c-badge-medallion {
        height: 80px;
        width: 80px;
        @apply mb-24;
    }
    & h2 {
        @apply font-bold font-mono text-16 leading-130;
        @apply text-unnamed15;
        @apply mb-12;
    }
    & .name {
        @apply text-h1 mb-20;
    }
    & .rarity {
        @apply font-bold font-mono text-12 leading-130;
        @apply uppercase;
        @apply py-4 px-8 mb-28;
        @apply rounded-3;
        background: rgb(var(--rgb));
        color: rgb(var(--rgb-fill));
    }
    & hr.c-divider {
        filter: var(--textColor7-filter);
        @apply mb-28;
    }
    & .reason {
        @apply text-p-large text-unnamed15 mb-4 text-center;
        @apply max-w-[500px] mx-auto;
    }
    & .earned-at {
        @apply text-p-base text-borderLight mb-32;
    }
    & .num-awardees {
        /* TODO */
        background: #191525;
        @apply flex items-center;
        @apply py-8 px-16 mb-10;
        & .c-icon {
            height: 16px;
            width: 16px;
            @apply mr-8;
            filter: var(--white-filter);
        }
        & strong {
            @apply mr-8;
        }
    }
    & .percentage-awardees {
        & strong {
            @apply text-textColor1 font-medium;
        }
    }
}
