.button {
    display: inline-flex;
    border: none;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-width: 10em;
    padding: 1rem 2rem 1rem 2.5rem;
    border-radius: var(--border-radius, .4rem);
    background-color: var(--color-brand);
    color: var(--color-gray-95);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: var(--line-height-dense);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-default)
}

@media (hover: hover) {
    .button:hover {
        background-color: var(--color-brand-light);
        color: var(--color-gray-95)
    }
}
@media (hover: hover) {
    .button--light:hover {
        background-color: var(--color-brand-light);
        color: var(--color-gray-1) !important;
    }
}

@media (prefers-contrast: more) {
    .button {
        background-color: var(--color-brand-light)
    }
}

.button .icon {
    margin-left: 0
}

.button--light {
    position: relative;
    z-index: 10;
    background-image: linear-gradient(135deg, var(--color-brand-light), var(--color-subtle));
    color: var(--color-strong)
}

.button--light:before {
    content: "";
    position: absolute;
    z-index: -10;
    inset: max(2px, .15rem);
    background-color: var(--color-background-dimmed);
    border-radius: .4rem;
    transition: inherit
}

@media (hover: hover) {
    .button--light {
        color: var(--color-strong)
    }

    .button--light:hover:before {
        background-color: var(--color-background)
    }
}