.btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px;
    border-radius: 15px;
    color: var(--color-font-surface);
    background: transparent;
    border: 1px solid var(--color-font-surface);
    transition: .2s ease-in-out;
    max-width: max-content;
    text-decoration: none;

    &:hover {
        transition: .2s ease-in-out;
        color: var(--color-font-light) !important;
        background: var(--color-font-surface);
    }

    &.primary {
        background: var(--color-font-surface) !important;
        border: 1px solid var(--color-font-surface);
        color: var(--color-bg-surface);

        &:hover {
            background: var(--color-bg-surface) !important;
            color: var(--color-font-surface) !important;
        }
    }

    &.secondary {
        background: var(--color-bg-surface) !important;
        border: 1px solid var(--color-bg-surface);

        &:hover {
            background: var(--color-font-surface) !important;
            color: var(--color-bg-surface) !important;
        }
    }
}