.standout-button {
	:is(.standout-columns .standout-column-element > * > * > *) > & {
		height: auto;
	}
}

.standout-button-element {
    padding: 0 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 0 !important;
    background-color: transparent !important;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    font-size: 1em !important;
    font-weight: 400 !important;
    position: relative;
    user-select: none;
    text-decoration: none;
    box-shadow: 0 0 0 0 transparent !important;
    --button-color: var(--color, var(--block-text-color, var(--color-text, currentColor)));
    --transition: 0.5s;
    transition: var(--transition) !important;

    & .standout-button-icon {
        width: .66em;
        height: auto;
        translate: -1em;
        display: block;
        aspect-ratio: 1;
        position: absolute;
        rotate: -60deg;
        background-color: var(--button-color);
        mask-image: url('../../images/arrow-right-short.svg');
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        transition: var(--transition);
    }

    & .standout-button-text {
        color: var(--button-color);
        filter: invert(0) brightness(1) contrast(1);
        transition: var(--transition);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &::before {
        top: 0;
        left: 0;
        width: 0;
        opacity: 0;
        height: 100%;
        content: '' !important;
        position: absolute;
        border-bottom: 1px solid var(--button-color) !important;
        transition: var(--transition) !important;
    }

    &:has(.standout-button-icon) {
        padding-left: 1.06em !important;
    }

    &.has-borders {
        font-size: var(--h4);
        padding: .53em 1.06em !important;
        border: 1px solid var(--button-color) !important;

        &::before {
            opacity: 1;
            background-color: var(--button-color);
        }

        &:has(.standout-button-icon) {
            padding-left: 2em !important;

            & .standout-button-icon {
                width: .8em;
                translate: -1.13em ;
            }
        }

        &.is-secondary {
            font-size: var(--p) !important;
            padding: .7em 1em !important;

			@media only screen and (max-width: 767px) {
				&.mobile-small {
					font-size: calc(var(--p) * 0.9) !important;
				}
			}

            &:has(.standout-button-icon) {
                padding-left: 1.9em !important;

                & .standout-button-icon {
                    width: .75em;
                    translate: -1.1em;
                }
            }
        }
    }

    @media (hover: hover) {
        &:hover {
            &:has(.standout-button-icon) {
                &:not(.has-borders) {
                    padding-right: 6px !important;
                }

                &::before {
                    width: 100%;
                    opacity: 1;
                }

                & .standout-button-icon {
                    rotate: 0deg;
                    margin-left: calc(100% - .733em);
                }

                & .standout-button-text {
                    translate: -1em;
                }

                &.has-borders {
                    & .standout-button-icon {
                        margin-left: calc(100% - 2.6em);
                    }

                    & .standout-button-text {
                        translate: -1.13em;
                    }

                    &.is-secondary {
                        & .standout-button-icon {
                            margin-left: calc(100% - 2.4em);
                        }

                        & .standout-button-text {
                            translate: -1em;
                        }
                    }
                }
            }

            &:not(:has(.standout-button-icon)) {
                box-shadow: 0 1px 0 0 var(--button-color) !important;
            }

            &.has-borders {
                &:not(:has(.standout-button-icon)) {
                    background-color: var(--button-color) !important;
                }
                
                & .standout-button-icon,
                & .standout-button-text {
                    filter: invert(1) brightness(2) contrast(2);
                }
            }
        }
    }
}