/* Size, theme and state are independent: .btn .btn--large .btn--primary. */
.btn {
    --btn-bg: var(--surface-muted);
    --btn-color: var(--white);
    --btn-hover: var(--surface-hover);
    --btn-shine: rgba(255, 255, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border: 0;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.btn--normal {
    --btn-bg: var(--surface-muted);
}

.btn--primary {
    --btn-bg: var(--primary);
    --btn-hover: var(--primary-hover);
}

.btn--muted {
    --btn-color: var(--grey);
}

.btn--light {
    --btn-bg: var(--white);
    --btn-color: var(--primary);
    --btn-hover: var(--paper);
    --btn-shine: rgba(43, 77, 138, 0.1);
}

.btn--active, .btn[aria-current='page'], .btn[aria-pressed='true'] {
    --btn-bg: var(--white);
    --btn-color: var(--black);
    --btn-hover: var(--paper);
    --btn-shine: rgba(43, 77, 138, 0.1);
}

.btn--large {
    padding: var(--space-s) calc(var(--space-s) * 1.5);
}

.btn--block {
    width: 100%;
    justify-content: space-between;
}

.btn:hover {
    background-color: var(--btn-hover);
}

.btn:active {
    filter: brightness(.92);
}

.btn:disabled, .btn[aria-disabled='true'] {
    cursor: not-allowed;
}

.btn:disabled {
    opacity: .55;
}

.link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    width: fit-content;
    color: inherit;
    padding-block: var(--space-xs);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease);
}

.link:hover,
.contact-card--light .link:hover {
    border-color: color-mix(in srgb, currentColor 50%, transparent);
}

.link[aria-disabled='true'] {
    cursor: not-allowed;
}

.arrow {
    width: 0.65em;
    height: 0.65em;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform var(--duration) var(--ease);
}

.btn .arrow {
    width: 0.75em;
    height: 0.75em;
}

/* The newsletter SDK shortcode only outputs text, so its decorative arrow lives in CSS. */
.newsletter .btn::after {
    content: '';
    position: relative;
    z-index: 1;
    width: 0.75em;
    height: 0.75em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.862 0V7.348L13.068 4.554L1.782 15.84L0 14.058L11.286 2.772L8.558 0H15.862Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.862 0V7.348L13.068 4.554L1.782 15.84L0 14.058L11.286 2.772L8.558 0H15.862Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--duration) var(--ease);
}

@media (hover: hover) {
    .btn:hover .arrow, .link:hover .arrow {
        transform: translate(2px, -2px);
    }

    .newsletter .btn:hover::after {
        transform: translate(2px, -2px);
    }
}

@media (max-width: 900px) {
    .btn, .section-label {
        padding: .3rem .7rem;
    }
    .btn--large {
        padding: var(--space-s) var(--space-s);
    }
    .link {
        padding-block: .3rem;
    }
}