.new-button {
    --padding-vertical: 1.25rem;
    --padding-horizontal: 1.5rem;
    --background-color: var(--clr-gray-100);
    --color: var(--clr-gray-600);
    --border-color: var(--clr-gray-100);
    --border-radius: var(--br-sm);
    --border-width: 2px;

    position: relative;
    z-index: 0;
    color: var(--color);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    padding: var(--padding-vertical) var(--padding-horizontal);

    &::before {
        content: '';
        position: absolute;
        inset: -1rem;
        z-index: -2;
        background-color: var(--background-color);
        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--border-color);
        opacity: 0;
    }

    &:hover::before {
        animation: button-pulse 0.4s 0.1s forwards;
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--background-color);
        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--border-color);
    }

    &:hover::after {
        animation: button-stretch 0.3s forwards;
    }

    &.new-button--border {
        --border-color: var(--clr-gray-600);
    }

    &.new-button--primary {
        --background-color: var(--clr-primary);
        --color: var(--clr-gray-0);
        --border-color: var(--clr-primary);

        &.new-button--border {
            --background-color: var(--clr-gray-0);
            --color: var(--clr-primary);
            --border-color: var(--clr-primary);
        }
    }

    &.new-button--black {
        --background-color: var(--clr-gray-950);
        --color: var(--clr-gray-0);
        --border-color: var(--clr-gray-950);

        &.new-button--border {
            --background-color: var(--clr-gray-0);
            --color: var(--clr-gray-950);
            --border-color: var(--clr-gray-950);
        }
    }

    &.new-button--dark-grey {
        --background-color: var(--clr-gray-700);
        --border-color: var(--clr-gray-700);

        &.new-button--border {
            --background-color: var(--clr-gray-0);
            --color: var(--clr-gray-700);
            --border-color: var(--clr-gray-700);
        }
    }

    &.new-button--white {
        --background-color: var(--clr-gray-0);
        --color: var(--clr-gray-950);
        --border-color: var(--clr-gray-0);

        &.new-button--border {
            --background-color: var(--clr-gray-950);
            --color: var(--clr-gray-0);
            --border-color: var(--clr-gray-0);
        }
    }

    &.new-button--error {
        --background-color: var(--clr-error-400);
        --color: var(--clr-gray-0);
        --border-color: var(--clr-error-400);

        &.new-button--border {
            --background-color: var(--clr-gray-0);
            --color: var(--clr-error-400);
            --border-color: var(--clr-error-400);
        }
    }
}