@import "../variables/variables";
@import "../mixins/private/button-mixins";
@import "../mixins/private/token-mixins";

a.cta-btn {
    @include background-color-token(
        cta-btn-background-color,
        color-background-primary
    );

    border-color: currentColor;
    border-radius: var(
        --cta-btn-border-radius,
        calc($button-height-regular / 2)
    );
    display: inline-block;
    font-size: var(--font-size-default);
    max-width: 100%;
    padding: $button-padding-vertical 20px;
    @include color-token(cta-btn-foreground-color, color-foreground-primary);
    @include btn-base();
}

a.cta-btn:visited {
    @include color-token(
        cta-btn-visited-foreground-color,
        color-foreground-primary
    );
}

a.cta-btn:focus,
a.cta-btn:hover {
    @include background-color-token(
        cta-btn-hover-background-color,
        color-foreground-primary
    );
    @include border-color-token(
        cta-btn-hover-border-color,
        color-foreground-primary
    );
    @include color-token(
        cta-btn-hover-foreground-color,
        color-background-primary
    );
}

a.cta-btn:not([href]),
a.cta-btn[aria-disabled="true"] {
    @include background-color-token(
        cta-btn-disabled-background-color,
        color-background-primary
    );
    @include border-color-token(
        cta-btn-disabled-border-color,
        color-stroke-disabled
    );
    @include color-token(
        cta-btn-disabled-foreground-color,
        color-foreground-disabled
    );
}

a.cta-btn--fluid {
    width: 100%;
}

span.cta-btn__cell {
    @include btn-cell-base();

    justify-content: center;

    @include btn-cell-fixed-height();
    @include btn-cell-truncated();
}

a.cta-btn svg.icon {
    @include btn-icon-base();

    flex-shrink: 0;
    height: 10px;
    width: 10px;
}

span.cta-btn__cell--fixed-height svg.icon {
    align-self: center;
    height: 1rem;
    overflow: visible; /* needed? */
    width: 1rem;
}

a.cta-btn--truncated {
    @include btn-truncate();
}

a.cta-btn--large {
    border-radius: $button-border-radius-large;
    display: inline-flex;
    font-size: var(--font-size-medium);
    min-height: $button-height-large;
}

[dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
    transform: rotate(180deg);
}
