/* action button global */
.action_button {
    display: flex;
    align-items: center;

    transition: color var(--animations_duration);

    font-weight: var(--fw--medium);

    gap: 12px;
}

.action_button:hover {
    text-decoration: none;
}


/* action button color normal/hover */
.action_button--primary {
    color: var(--c_neutral--white);
}

.action_button--primary:hover,
.action_button--primary:active {
    color:var(--c_brand--200);
}

.action_button--primary.action_button--inverse {
    color: var(--c_neutral--900);
}

.action_button--primary.action_button--inverse:hover,
.action_button--primary.action_button--inverse:active {
    color: var(--c_brand--500);
}

.action_button--secondary,
.action_button--secondary:hover,
.action_button--secondary:active {
    color: var(--c_neutral--white);
}

.action_button--secondary.action_button--inverse,
.action_button--secondary.action_button--inverse:hover,
.action_button--secondary.action_button--inverse:active {
    color: var(--c_neutral--900);
}


/* action button focus */
.action_button:focus-visible {
    border-radius: 4px;
    box-shadow: 0px 0px 0px 4px #E96CF5, 0px 0px 0px 2px #0F1014;
}


/* action button arrow */
.action_button .arrow {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    padding: 5px;

    border-width: 1px;
    border-style: solid;
    border-radius: 50%;

    aspect-ratio: 1 / 1;
}

.action_button--small .arrow {
    padding: 3px;
}

.action_button svg {
    animation-duration: var(--animations_duration);
    animation-duration: 1s;
}

.action_button svg path {
    transition: color var(--animations_duration);
}

.action_button:hover svg {
    animation-name: arrowAnim;
    animation-iteration-count: infinite;
}


/* action button arrow normal/hover/active */
.action_button .arrow,
.action_button:hover .arrow,
.action_button:active .arrow {
    border-color: var(--c_brand--200);
}

.action_button svg path,
.action_button:hover svg path,
.action_button:active svg path {
    fill:var(--c_brand--200);
}

.action_button--inverse .arrow,
.action_button--inverse:hover .arrow,
.action_button--inverse:active .arrow {
    border-color: var(--c_brand--500);
}

.action_button--inverse svg path,
.action_button--inverse:hover svg path,
.action_button--inverse:active svg path {
    fill: var(--c_brand--500);
}

.action_button--secondary .arrow,
.action_button--secondary:hover .arrow,
.action_button--secondary:active .arrow {
    border-color: var(--c_neutral--white);
}

.action_button--secondary svg path,
.action_button--secondary:hover svg path,
.action_button--secondary:active svg path {
    fill:var(--c_neutral--white);
}

.action_button--secondary.action_button--inverse .arrow,
.action_button--secondary.action_button--inverse:hover .arrow,
.action_button--secondary.action_button--inverse:active .arrow {
    border-color: var(--c_neutral--900);
}

.action_button--secondary.action_button--inverse svg path,
.action_button--secondary.action_button--inverse:hover svg path,
.action_button--secondary.action_button--inverse:active svg path {
    fill: var(--c_neutral--900);
}


/* action button disabled */
.action_button--disabled {
    cursor: not-allowed;
}

.action_button--disabled {
    color: var(--c_neutral--700);
}

.action_button--inverse--disabled {
    color: var(--c_neutral--100);
}


/* action button arrow disabled */
.action_button--disabled,
.action_button--disabled:hover {
    color: var(--c_neutral--700);
}

.action_button--disabled .arrow,
.action_button--disabled:hover .arrow,
.action_button--disabled:active .arrow {
    border-color: var(--c_neutral--700);
}

.action_button--disabled svg path,
.action_button--disabled:hover svg path,
.action_button--disabled:active svg path {
    fill: var(--c_neutral--700);
}

.action_button--disabled.action_button--inverse,
.action_button--disabled.action_button--inverse:hover {
    color: var(--c_neutral--100);
}

.action_button--disabled.action_button--inverse .arrow,
.action_button--disabled.action_button--inverse:hover .arrow,
.action_button--disabled.action_button--inverse:active .arrow {
    border-color: var(--c_neutral--100);
}

.action_button--disabled.action_button--inverse svg path,
.action_button--disabled.action_button--inverse:hover svg path,
.action_button--disabled.action_button--inverse:active svg path {
    fill: var(--c_neutral--100);
}


/* action button size */
.action_button--xlarge {
    letter-spacing: -0.75px;

    font-size: 28px;
    line-height: 34px;
}

.action_button--large {
    font-size: 18px;
    line-height: 24px;
}

.action_button--medium {
    font-size: 18px;
    line-height: 24px;
}

.action_button--small {
    font-size: 16px;
    line-height: 24px;
}


/* action button arrow size */
.action_button--xlarge svg,
.action_button--large svg {
    width: 20px;
    height: 20px;
}

.action_button--medium svg {
    width: 16px;
    height: 16px;
}

.action_button--small svg {
    width: 16px;
    height: 16px;
}


/* cta button global */
.cta_button {
    display: flex;
    align-items: center;

    cursor: pointer;
    transition: all var(--animations_duration);

    border-radius: 4px;

    font-weight: var(--fw--medium);

    gap: 8px;
}

.cta_button:hover {
    text-decoration: none;
}


/* cta button color normal/hover */
.cta_button--primary {
    color: var(--c_neutral--white);
    background: var(--c_brand--500);
}

.cta_button--primary:hover,
.cta_button--primary:active {
    color: var(--c_neutral--white);
    background: var(--c_brand--400);
}

.cta_button--primary.cta_button--inverse {
    color: var(--c_neutral--white);
    background: var(--c_brand--500);
}

.cta_button--primary.cta_button--inverse:hover,
.cta_button--primary.cta_button--inverse:active {
    color: var(--c_neutral--white);
    background: var(--c_brand--800);
}

.cta_button--secondary {
    color: var(--c_neutral--900);
    background: var(--c_neutral--white);
}

.cta_button--secondary:hover,
.cta_button--secondary:active {
    color: var(--c_neutral--900);
    background: #D2D3D6;
}

.cta_button--secondary.cta_button--inverse {
    color: var(--c_neutral--white);
    background: var(--c_neutral--900);
}

.cta_button--secondary.cta_button--inverse:hover {
    color: var(--c_neutral--white);
    background: var(--c_neutral--900);
}

.cta_button--ghost--primary {
    border: 1px solid var(--c_brand--500);
}

.cta_button--ghost--primary:not(.cta_button--disabled):hover,
.cta_button--ghost--primary:not(.cta_button--disabled):active {
    border: 1px solid var(--c_brand--400);
}

.cta_button--ghost--primary.cta_button--inverse {
    border: 1px solid var(--c_brand--500);
}

.cta_button--ghost--primary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--ghost--primary.cta_button--inverse:not(.cta_button--disabled):active {
    border: 1px solid var(--c_brand--500);
}

.cta_button--ghost--secondary {
    border: 1px solid var(--c_neutral--white);
}

.cta_button--ghost--secondary:not(.cta_button--disabled):hover,
.cta_button--ghost--secondary:not(.cta_button--disabled):active {
    border: 1px solid var(--c_neutral--white);
}

.cta_button--ghost--secondary.cta_button--inverse {
    border: 1px solid var(--c_neutral--900);
}

.cta_button--ghost--secondary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--ghost--secondary.cta_button--inverse:not(.cta_button--disabled):active {
    border: 1px solid var(--c_neutral--900);
}

.cta_button--ghost--primary,
.cta_button--link--primary {
    color: var(--c_neutral--white);
    background: transparent;
}

.cta_button--ghost--primary:not(.cta_button--disabled):hover,
.cta_button--ghost--primary:not(.cta_button--disabled):active,
.cta_button--link--primary:not(.cta_button--disabled):hover,
.cta_button--link--primary:not(.cta_button--disabled):active {
    color: var(--c_neutral--white);
    background: var(--c_brand--900);
}

.cta_button--ghost--primary.cta_button--inverse,
.cta_button--link--primary.cta_button--inverse {
    color: var(--c_brand--500);
    background: transparent;
}

.cta_button--ghost--primary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--ghost--primary.cta_button--inverse:not(.cta_button--disabled):active,
.cta_button--link--primary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--link--primary.cta_button--inverse:not(.cta_button--disabled):active {
    color: var(--c_brand--500);
    background: var(--c_brand--50);
}

.cta_button--ghost--secondary,
.cta_button--link--secondary {
    color: var(--c_neutral--white);
    background: transparent;
}

.cta_button--ghost--secondary:not(.cta_button--disabled):hover,
.cta_button--ghost--secondary:not(.cta_button--disabled):active,
.cta_button--link--secondary:not(.cta_button--disabled):hover,
.cta_button--link--secondary:not(.cta_button--disabled):active {
    color: var(--c_neutral--white);
    background: var(--c_neutral--900);
}

.cta_button--ghost--secondary.cta_button--inverse,
.cta_button--link--secondary.cta_button--inverse {
    color: var(--c_neutral--900);
    background: transparent;
}

.cta_button--ghost--secondary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--ghost--secondary.cta_button--inverse:not(.cta_button--disabled):active,
.cta_button--link--secondary.cta_button--inverse:not(.cta_button--disabled):hover,
.cta_button--link--secondary.cta_button--inverse:not(.cta_button--disabled):active {
    color: var(--c_neutral--900);
    background: var(--c_neutral--50);
}


/* cta button focus */
.cta_button:focus-visible {
    box-shadow: 0px 0px 0px 4px #E96CF5, 0px 0px 0px 2px #0F1014;
}


/* cta button icon */
.cta_button--primary svg path,
.cta_button--primary:hover svg path,
.cta_button--primary:active svg path,
.cta_button--primary.cta_button--inverse svg path,
.cta_button--primary.cta_button--inverse:hover svg path,
.cta_button--primary.cta_button--inverse:active svg path {
    fill:var(--c_neutral--white);
}

.cta_button--secondary svg path,
.cta_button--secondary:hover svg path,
.cta_button--secondary:active svg path {
    fill:var(--c_neutral--900);
}

.cta_button--secondary.cta_button--inverse svg path,
.cta_button--secondary.cta_button--inverse:hover svg path,
.cta_button--secondary.cta_button--inverse:active svg path {
    fill:var(--c_neutral--white);
}

.cta_button--ghost--primary svg path,
.cta_button--ghost--primary:hover svg path,
.cta_button--ghost--primary:active svg path,
.cta_button--link--primary svg path,
.cta_button--link--primary:hover svg path,
.cta_button--link--primary:active svg path {
    fill:var(--c_neutral--white);
}

.cta_button--ghost--primary.cta_button--inverse svg path,
.cta_button--ghost--primary.cta_button--inverse:hover svg path,
.cta_button--ghost--primary.cta_button--inverse:active svg path,
.cta_button--link--primary.cta_button--inverse svg path,
.cta_button--link--primary.cta_button--inverse:hover svg path,
.cta_button--link--primary.cta_button--inverse:active svg path {
    fill: var(--c_brand--400);
}

.cta_button--ghost--secondary svg path,
.cta_button--ghost--secondary:hover svg path,
.cta_button--ghost--secondary:active svg path,
.cta_button--link--secondary svg path,
.cta_button--link--secondary:hover svg path,
.cta_button--link--secondary:active svg path {
    fill: var(--c_neutral--white);
}

.cta_button--ghost--secondary.cta_button--inverse svg path,
.cta_button--ghost--secondary.cta_button--inverse:hover svg path,
.cta_button--ghost--secondary.cta_button--inverse:active svg path,
.cta_button--link--secondary.cta_button--inverse svg path,
.cta_button--link--secondary.cta_button--inverse:hover svg path,
.cta_button--link--secondary.cta_button--inverse:active svg path {
    fill: var(--c_neutral--900);
}


/* cta button disabled */
.cta_button--disabled {
    cursor: not-allowed;
}

.cta_button--primary.cta_button--disabled {
    color: var(--c_neutral--600);
    background: var(--c_brand--900);
}

.cta_button--primary.cta_button--disabled svg path {
    fill: var(--c_neutral--600);
}

.cta_button--primary.cta_button--inverse.cta_button--disabled {
    color: var(--c_brand--25);
    background: var(--c_brand--100);
}

.cta_button--primary.cta_button--inverse.cta_button--disabled svg path {
    fill: var(--c_brand--25);
}

.cta_button--secondary.cta_button--disabled {
    color: var(--c_neutral--900);
    background: var(--c_neutral--700);
}

.cta_button--secondary.cta_button--inverse.cta_button--disabled {
    color: var(--c_neutral--200);
    background: #D2D3D6;
}

.cta_button--secondary.cta_button--inverse.cta_button--disabled svg path {
    fill: var(--c_neutral--200);
}

.cta_button--ghost--primary.cta_button--disabled,
.cta_button--link--primary.cta_button--disabled {
    color: var(--c_neutral--600);
}

.cta_button--ghost--primary.cta_button--disabled {
    border: 1px solid var(--c_brand--800);
}

.cta_button--ghost--primary.cta_button--disabled svg path,
.cta_button--link--primary.cta_button--disabled svg path {
    fill: var(--c_neutral--600);
}

.cta_button--ghost--primary.cta_button--inverse.cta_button--disabled,
.cta_button--link--primary.cta_button--inverse.cta_button--disabled {
    color: var(--c_neutral--200);
}

.cta_button--ghost--primary.cta_button--inverse.cta_button--disabled {
    border: 1px solid var(--c_neutral--200);
}

.cta_button--ghost--primary.cta_button--inverse.cta_button--disabled svg path,
.cta_button--link--primary.cta_button--inverse.cta_button--disabled svg path {
    fill: var(--c_neutral--200);
}

.cta_button--ghost--secondary.cta_button--disabled,
.cta_button--link--secondary.cta_button--disabled {
    color: var(--c_neutral--600);
}

.cta_button--ghost--secondary.cta_button--disabled {
    border: 1px solid var(--c_neutral--600);
}

.cta_button--ghost--secondary.cta_button--disabled svg path,
.cta_button--link--secondary.cta_button--disabled svg path {
    fill: var(--c_neutral--600);
}

.cta_button--ghost--secondary.cta_button--inverse.cta_button--disabled,
.cta_button--link--secondary.cta_button--inverse.cta_button--disabled {
    color: var(--c_neutral--200);
}

.cta_button--ghost--secondary.cta_button--inverse.cta_button--disabled {
    border: 1px solid var(--c_neutral--200);
}

.cta_button--ghost--secondary.cta_button--inverse.cta_button--disabled svg path,
.cta_button--link--secondary.cta_button--inverse.cta_button--disabled svg path {
    fill: var(--c_neutral--200);
}


/* cta button size */
.cta_button--large,
.cta_button--medium,
.cta_button--small,
.cta_button--extra-small {
    line-height: 24px;
}

.cta_button--large {
    padding: 16px 24px;

    font-size: 18px;
}

.cta_button--large:not(.cta_button--disabled):active {
    padding: 20px 24px 12px;
}

.cta_button--medium {
    padding: 12px 24px;

    font-size: 18px;
}

.cta_button--medium:not(.cta_button--disabled):active {
    padding: 16px 24px 8px;
}

.cta_button--small {
    padding: 8px 16px;

    font-size: 16px;
}

.cta_button--small:not(.cta_button--disabled):active {
    padding: 10px 16px 6px;
}

.cta_button--extra-small {
    padding: 8px 14px;

    font-size: 14px;
}

.cta_button--extra-small:not(.cta_button--disabled):active {
    padding: 10px 14px 6px;
}

.cta_button--large.cta_button--square {
    padding: 16px;
}

.cta_button--medium.cta_button--square {
    padding: 12px;
}

.cta_button--small.cta_button--square {
    padding: 10px;
}

.cta_button--extra-small.cta_button--square {
    padding: 7px;
}


/* cta button icon size */
.cta_button--large svg,
.cta_button--medium svg {
    width: 24px;
    height: 24px;
}

.cta_button--small svg {
    width: 20px;
    height: 20px;
}

.cta_button--extra-small svg {
    width: 16px;
    height: 16px;
}