.primary-btn {
    img {
        height: 18px;
        width: auto;
    }

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 6px 14px;
    font-family: var(--font-body);
    border-radius: 6px;
    border: none;
    background: linear-gradient(180deg, #f7f7f8 0%, #d9d9de 100%);
    box-shadow: 0px 0.5px 1.5px rgba(34, 34, 34, 0.08), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), transform var(--transition-fast);

    span {
        color: var(--color-fg) !important;
    }

    &:hover,
    &:focus-visible,
    &.active {
        color: #fff;
        background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
        box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);

        span {
            color: var(--color-bg) !important;
        }
    }

    &:focus-visible {
        outline: 0;
        box-shadow:
            inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
            0px 0.5px 1.5px rgba(54, 122, 246, 0.25),
            0px 0px 0px 3px rgba(58, 108, 217, 0.35);
    }
}

.secondary-btn {
    color: black;

    &:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
    }
}