.ui-action-button-arrow {
    --button-width: auto;
    --button-height: 64px;
    --button-border-radius: var(--button-height);
    --button-icon-border-radius: 50%;
    --button-text-size: var(--typography-font-size-p);
    --button-text-color: var(--color-btm-dark-blue);
    --button-background-color: #fff;
    --button-shadow-color: var(--color-btm-orange);
    --button-arrow-color: #fff;
    --button-arrow-background-color: var(--button-shadow-color);
    --button-padding-horizontal: 24px;
    --button-arrow-size: calc(var(--button-height) - 4px);
    --button-arrow-icon-size: calc(var(--button-arrow-size) / 1.5);

    --padding-left: calc(var(--button-padding-horizontal) + 2px);
    --padding-right: calc(var(--button-padding-horizontal) + var(--button-arrow-size) + 4px);

    @media (width <= 768px) {
        --button-height: 56px;
    }

    @media (width <= 568px) {
        --button-height: 48px;
    }

    @media (width <= 520px) {
        .ui-action-button-arrow {
            --button-width: 100%;
        }
    }

    @media (width <= 440px) {
        --button-padding-horizontal: 16px;
    }

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-width);
    height: var(--button-height);
    gap: 6px;
    padding: 2px var(--padding-right) 2px var(--padding-left);
    border-radius: var(--button-border-radius);
    margin: 0;
    border: 0;
    font-size: var(--button-text-size);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--button-text-color);
    transition: all .2s linear;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--button-background-color);
    box-shadow: 0 0 0 1px var(--button-shadow-color);

    &:hover,
    &:active {
        --button-text-color: #fff;
        --button-background-color: var(--color-btm-orange);
        --button-arrow-color: var(--color-btm-orange);
        --button-arrow-background-color: #fff;
    }

    abbr {
        text-decoration: none;
    }

    &:after {
        content: '';
        position: absolute;
        z-index: 1;
        display: block;
        right: 2px;
        top: 2px;
        width: var(--button-arrow-size);
        height: var(--button-arrow-size);
        border-radius: var(--button-icon-border-radius);
        transition: all .2s linear;
        background-color: var(--button-arrow-background-color);
    }

    &:before {
        --offset: calc((var(--button-arrow-size) - var(--button-arrow-icon-size)) / 2 + 2px);;

        content: '';
        position: absolute;
        z-index: 2;
        display: block;
        right: var(--offset);
        top: var(--offset);
        width: var(--button-arrow-icon-size);
        height: var(--button-arrow-icon-size);
        transition: all .2s linear;
        background-color: var(--button-arrow-color);
        mask: url('/assets/svg/arrow-right-GFL4Bmj.svg') no-repeat center;
    }
}