.btn {
    @apply relative block text-center rounded-lg border-2 cursor-pointer;

    a {
        @apply text-inherit no-underline;
    }
}

.btn[disabled],
.btn:disabled {
    @apply pointer-events-none cursor-not-allowed;
    @apply bg-background-disabled text-text-disabled border-border-disabled shadow-none;
}

.btn:focus-visible::after,
.btn.is-focused::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 4px solid var(--color-focus);
    border-radius: 4px;
    pointer-events: none;
}

.btn:focus-visible {
    outline: none;
}

.btn--primary {
    @apply bg-primary border-border-default text-text-default;
    @apply hover:bg-primary-hover hover:shadow-[0_4px_0_0_rgba(0,0,0,0.1)];
}

.btn--primary:active {
    @apply bg-primary-pressed border-border-default;
}

.btn--primary:active::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--color-border-default);
    border-radius: 6px;
    pointer-events: none;
}

.btn--secondary {
    @apply bg-button-surface-secondary border-primary text-text-default;
    @apply hover:bg-button-surface-secondary-hover hover:shadow-[0_4px_0_0_rgba(0,0,0,0.1)];
}

.btn--secondary:active {
    @apply bg-primary-pressed;
}

.btn--secondary:active::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    pointer-events: none;
}

.btn--destructive {
    @apply bg-white border-border-error text-destructive;
}

.btn--destructive:hover {
    @apply bg-background-destructive-hover shadow-[inset_0_0_0_2px_var(--color-border-error),0_4px_0_0_var(--color-background-destructive-hover)];
}

.btn--destructive:active {
    @apply bg-background-destructive-active shadow-[inset_0_0_0_2px_var(--color-border-error)];
}

.btn--small {
    @apply px-3 py-2 w-fit rounded;
    font-size: 16px;
    font-weight: 700;
}

.btn--small:active::before,
.btn--small.is-active::before {
    border-radius: 4px;
}

.btn--back {
    @apply bg-white border-border-default text-text-default rounded;
    @apply inline-flex items-center justify-center;
    height: 40px;
    padding: 0 12px;
    gap: var(--spacing-cfa-xsm);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.btn--back:hover,
.btn--back.is-hover {
    @apply bg-primary-hover border-transparent;
}

.btn--back:active,
.btn--back.is-active {
    @apply bg-primary-pressed border-border-default;
}

.btn--large {
    @apply p-cfa-med w-fit mx-auto;
    font-size: 22px;
    font-weight: 700;
}

.yes-no-buttons__group {
    @apply flex items-center gap-cfa-lg;
}

.yes-no-buttons__button {
    @apply relative flex flex-1 items-center justify-center rounded cursor-pointer;
    @apply bg-button-surface-secondary text-text-default;
    @apply border-2 border-border-default;
    gap: 10px;
    padding: 16px 24px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.yes-no-buttons__button .yes-no-buttons__check {
    display: none;
}

.yes-no-buttons__button:hover,
.yes-no-buttons__button.is-selected {
    border-width: 4px;
    padding: 14px 22px;
}

.yes-no-buttons__button.is-selected {
    @apply bg-button-surface-secondary-hover;
}

.yes-no-buttons__button.is-selected .yes-no-buttons__check {
    display: inline-block;
}

.yes-no-buttons__button:focus-visible {
    outline: 4px solid var(--color-focus);
    outline-offset: 4px;
}

.yes-no-buttons__unsure {
    @apply mt-cfa-med text-center;
}