@import url("/style.css");

#buyOptions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 2rem;
}

#buyOptions h3 {
    grid-row: 1;
    grid-column: 1 / -1;
}

.buyOption {
    padding: var(--modal-padding);
    max-width: 20vw;
}

.buyOption.primary {
    border: 1px solid #bfdbfe;
}

.buyOption .header * {
    margin: 0.3rem 0;
}

p.price {
    font-size: 1.5rem;
    white-space: nowrap;
}

.buyOption .content ul {
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.buyOption .content li {
    display: flex;
    align-items: baseline;
    padding: 0.3rem 0;
    gap: 0.3rem;
}

.buyOption .content li p {
    margin: 0;
}

.buyOption .content li::before {
    --icon-size: 1.1em;
    content: "";
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    transform: translateY(calc(50% - 0.5cap));
    background-position: left center;
    background-repeat: no-repeat;
    background-size: var(--icon-size) var(--icon-size);
}

.buyOption .content li.positive::before {
    background-image: url(/Assets/Icons/Lists/Check.svg);
    filter: invert(32.5%) sepia(16.8%) saturate(792%) hue-rotate(89deg) brightness(181.6%) contrast(198.8%);
}

.buyOption .content li.negative::before,
.buyOption .content li.absoluteNegative::before {
    background-image: url(/Assets/Icons/Lists/Tilde.svg);
    filter: invert(7.1%) sepia(13.8%) saturate(5415.8%) hue-rotate(311.0deg) brightness(436.4%) contrast(132.4%);
}

.buyOption .content li.absoluteNegative::before {
    background-image: url(/Assets/Icons/Lists/Xmark.svg);
}

.buyOption .buyOptionAction {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #buyOptions {
        grid-template-columns: 1fr;
    }

    .buyOption {
        max-width: none;
    }
}