%base-button {
    --rocket-ui-button-font: var(--rocket-font-primary);
    --rocket-ui-button-color: var(--rocket-color-white-base);
    --rocket-ui-button-text-color: var(--rocket-color-grey-700);
    --rocket-ui-button-border-color: var(--rocket-color-grey-500);

    @include transition;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 2.25rem;
    color: var(--rocket-ui-button-text-color);
    font-weight: 500;
    font-size: 1.5625rem;
    font-family: var(--rocket-ui-button-font);
    line-height: 1.30125;
    text-decoration: none;
    column-gap: 2.5rem;
    background-color: var(--rocket-ui-button-color);
    border: 1px solid var(--rocket-ui-button-border-color);
    border-radius: var(--rocket-buttons-border-radius);
    outline: none;
    cursor: pointer;

    &:hover {
        --rocket-ui-button-text-color: var(--rocket-color-grey-700);
        --rocket-ui-button-color: var(--rocket-color-grey-200);
    }

    &:active,
    &:focus {
        @include theme-focus-ring(false);

        --rocket-ui-button-color: var(--rocket-color-grey-100);
    }

    &[disabled] {
        user-select: none;
        pointer-events: none;
        opacity: 0.65;
    }

    span {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    svg {
        @include min-size(1em);

        fill: currentColor;
        color: inherit;

        &:has([stroke-width]) {
            stroke: currentColor;
            fill: transparent;

            path {
                stroke: currentColor;
                color: inherit;
            }
        }
    }
}

.button {
    @extend %base-button;

    $this: &;

    &--disabled {
        user-select: none;
        pointer-events: none;
        opacity: 0.65;
    }

    &--sm {
        padding: 0.5125rem 2.875rem;
        font-size: 2.1875rem;
    }

    &--lg {
        font-size: 2.1875rem;
        padding: 1.108rem 3.75rem;
    }

    &--icon {
        @include size(4.375rem);

        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        padding: 0.5em;

        svg {
            //@include size(1.5rem);
        }

        #{$this}__icon {
            line-height: 1;
        }

        &#{$this}--lg {
            @include size(5.25rem);
        }

        &#{$this}--sm {
            @include size(4rem);
        }
    }

    &--fluid {
        display: flex;
        width: 100%;
    }

    &--primary {
        // primary styles
        --rocket-ui-button-text-color: var(--rocket-color-white-base);
        --rocket-ui-button-color: var(--rocket-color-primary-100);
        --rocket-ui-button-border-color: var(--rocket-color-primary-100);

        &:hover {
            --rocket-ui-button-text-color: var(--rocket-color-white-base);
            --rocket-ui-button-color: var(--rocket-color-secondary-100);
            --rocket-ui-button-border-color: var(--rocket-color-secondary-100);
        }

        &:active,
        &:focus {
            @include theme-focus-ring(false);

            --rocket-ui-button-text-color: var(--rocket-color-white-base);
            --rocket-ui-button-color: var(--rocket-color-secondary-100);
            --rocket-ui-button-border-color: var(--rocket-color-secondary-100);
        }

        &[disabled],
        &:is(#{$this}--disabled) {
            --rocket-ui-button-text-color: var(--rocket-color-white-base);
            --rocket-ui-button-color: var(--rocket-color-primary-100);
            --rocket-ui-button-border-color: var(--rocket-color-primary-100);
        }
    }

    &--primary-outline {
        // primary outline styles
        --rocket-ui-button-text-color: var(--rocket-color-secondary-100);
        --rocket-ui-button-border-color: var(--rocket-color-secondary-100);
        --rocket-ui-button-color: transparent;

        border: 3px solid var(--rocket-ui-button-border-color);
        font-weight: 700;

        &:hover {
            --rocket-ui-button-text-color: var(--rocket-color-primary-100);
            --rocket-ui-button-border-color: var(--rocket-color-primary-100);
            --rocket-ui-button-color: transparent;
        }

        &:active,
        &:focus {
            @include theme-focus-ring(false);

            --rocket-ui-button-border-color: var(--rocket-color-primary-100);
            --rocket-ui-button-text-color: var(--rocket-color-primary-100);
            --rocket-ui-button-color: transparent;
        }

        &[disabled],
        &:is(#{$this}--disabled) {
            --rocket-ui-button-text-color: var(--rocket-color-secondary-100);
            --rocket-ui-button-color: var(--rocket-color-white-base);
            --rocket-ui-button-border-color: var(--rocket-color-secondary-100);
        }
    }

    &--red {
        // primary outline styles
        --rocket-ui-button-text-color: var(--rocket-color-white-base);
        --rocket-ui-button-border-color: var(--rocket-color-red-200);
        --rocket-ui-button-color: var(--rocket-color-red-200);

        &:hover {
            --rocket-ui-button-text-color: var(--rocket-color-red-200);
            --rocket-ui-button-border-color: var(--rocket-color-red-200);
            --rocket-ui-button-color: transparent;
        }

        &:active,
        &:focus {
            @include theme-focus-ring(false);

            --rocket-ui-button-text-color: var(--rocket-color-red-100);
            --rocket-ui-button-border-color: var(--rocket-color-red-100);
            --rocket-ui-button-color: transparent;
        }

        &[disabled],
        &:is(#{$this}--disabled) {
            --rocket-ui-button-text-color: var(--rocket-color-red-100);
            --rocket-ui-button-color: var(--rocket-color-white-base);
            --rocket-ui-button-border-color: var(--rocket-color-red-100);
        }
    }

    &--link-only {
        --rocket-ui-button-text-color: var(--rocket-color-secondary-100);

        background-color: transparent;
        border: 0;
        column-gap: 12px;
        font-size: 1.5rem;
        padding: 0.3em;

        .button__text {
            position: relative;

            &::after {
                @include transition;
                @include absolute(100%, null, null, 0);
                @include size(100%, 1px);

                background-color: var(--rocket-ui-button-text-color);
                content: '';
            }
        }

        .button__icon {
            @include transition;
        }

        &:hover {
            .button__text::after {
                background-color: transparent;
            }

            .button__icon {
                transform: translateX(10px);
            }
        }
    }
}

.button-wrapper {
    display: flex;
    margin-top: $rocket-spacing-size-7;
    column-gap: 0.5rem;
}