.btn {
    --btn-border-radius: var(--border-radius-lg);
    --btn-font-size: 18px;
    --btn-line-height: 26px;
    --btn-color: var(--color-white);
    --btn-background-color: #dddddd;
    --btn-font-weight: var(--font-weight-bold);
    --btn-padding-vertical: var(--spacing-lg);
    --btn-padding-horizontal: var(--spacing-2xl);
    --btn-transition: box-shadow .3s, transform .3s;

    --btn-hover-transform: translateY(-2px);
    --btn-hover-box-shadow: 0 2px 8px rgba(255, 153, 0, .27), 0 16px 24px rgba(241, 135, 0, .25);

    --btn-primary-gradient: linear-gradient(147.14deg, #f90, #f90 50%, #e84e10);
    --btn-primary-after-transition: transform .425s ease-in-out;
    --btn-primary-after-transform: translate3d(50%, 0, 0);

    --btn-ghost-color: var(--color-black);
    --btn-ghost-border-color: var(--color-primary);
    --btn-ghost-hover-bg: transparent;
    --btn-ghost-hover-color: var(--color-primary);
    --btn-ghost-font-weight: var(--font-weight-regular);

    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    border: 0;
    color: var(--btn-color);
    background-color: var(--btn-background-color);
    font-weight: var(--btn-font-weight);
    overflow: hidden;
    transform-style: preserve-3d;
    padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
    margin: 0 auto;
    position: relative;
    transition: var(--btn-transition);

    &:hover {
        transform: var(--btn-hover-transform);
        box-shadow: var(--btn-hover-box-shadow);
    }

    &.btn--primary {
        &::after {
            content: "";
            background: var(--btn-primary-gradient);
            position: absolute;
            right: 0;
            top: 0;
            width: 200%;
            height: 100%;
            transition: var(--btn-primary-after-transition);
            z-index: -1;
        }

        &:hover,
        &:focus {
            color: var(--btn-color);

            &::after {
                transform: var(--btn-primary-after-transform);
            }
        }
    }

    &.btn--ghost {
        background-color: transparent;
        border: 2px solid var(--btn-ghost-border-color);
        color: var(--btn-ghost-color);
        font-weight: var(--btn-ghost-font-weight);

        &:hover,
        &:focus {
            background-color: var(--btn-ghost-hover-bg);
            color: var(--btn-ghost-hover-color);
            box-shadow: var(--btn-hover-box-shadow);
            transform: var(--btn-hover-transform);
        }
    }
}