/* Buttons
--------------------------------------------- */
.wp-block-button > .wp-element-button {
    display: flex;
    height: var(--wp--custom--spacing--3-rem);
    gap: var(--wp--custom--spacing--0-5-rem);
    padding-right: var(--wp--custom--spacing--1-5-rem);
    padding-left: var(--wp--custom--spacing--1-5-rem);
    background: var(--wp--preset--color--red-50);
    border-radius: 4px;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}
.wp-block-button > .wp-element-button:hover {
    background: var(--wp--custom--color--hover);
}
.wp-block-button > .wp-element-button:active {
    background: var(--wp--custom--color--active);
}
.wp-block-button > .wp-element-button:focus {
    box-shadow: 0px 0px 0px 2px var(--wp--preset--color--white), 0px 0px 0px 4px var(--wp--custom--color--red-80);
}
.wp-block-button.disabled > .wp-element-button {
    background: var(--wp--custom--color--disabled);
    pointer-events: none;
    cursor: default;
}

/* Secondary Button
--------------------------------------------- */
.wp-block-button.is-style-outline > .wp-element-button {
    background: #fff;
    color: var(--wp--custom--color--grey-40) !important;
    border: 1px solid;
    border-color: var(--wp--custom--color--grey-40);
    padding-right: var(--wp--custom--spacing--1-5-rem);
    padding-left: var(--wp--custom--spacing--1-5-rem);
}
.wp-block-button.is-style-outline > .wp-element-button:hover {
    background: var(--wp--custom--color--grey-40);
    color: var(--wp--preset--color--white) !important;
    border-color: var(--wp--custom--color--grey-40);
}
.wp-block-button.is-style-outline > .wp-element-button:active {
    background: var(--wp--custom--color--grey-30);
    border-color: var(--wp--custom--color--grey-30);
}
.wp-block-button.is-style-outline.disabled > .wp-element-button {
    color: var(--wp--custom--color--disabled) !important;
    border-color: var(--wp--custom--color--disabled);
}

/* Tertiary Button
Will always contain an arrow forward icon –>
--------------------------------------------- */
.wp-block-button.is-style-tertiary > .wp-element-button {
    height: auto;
    background-color: transparent;
    padding: 0;
    color: var(--wp--preset--color--red-50);
}
.wp-block-button.is-style-tertiary > .wp-element-button:hover {
    color: var(--wp--custom--color--hover);
}
.wp-block-button.is-style-tertiary > .wp-element-button:active {
    color: var(--wp--custom--color--active);
}
.wp-block-button.is-style-tertiary.disabled > .wp-element-button {
    color: var(--wp--custom--color--disabled);
}

/* White (Download) Button
Mainly used for downloads –>
--------------------------------------------- */

.wp-block-button.is-style-download > .wp-element-button {
    background: #fff;
    color: #000;
    border: 1px solid;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 4px;
    justify-content: left;
    border-color: transparent;
    width: 100%;
    font-weight: 500;
}
.wp-block-button.is-style-download > .wp-element-button > img {
    margin-top: -3px;
    margin-right: 8px;
}
.wp-block-button.is-style-download > .wp-element-button:hover {
    background: var(--color-red-50, #e41b13);
    color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-download > .wp-element-button:active {
    background: #bd150f;
    color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-download.disabled:not(.no-arrow) > .wp-element-button {
    color: var(--wp--custom--color--disabled);
}
.wp-block-button.is-style-download .iconified-buttons__icon {
    color: var(--wp--preset--color--red-50);
}
.wp-block-button.is-style-download > .wp-element-button:hover .iconified-buttons__icon {
    color: white;
}

/* Icons
These will be provided via iconified-buttons plugin */
.iconified-buttons__icon {
    height: var(--wp--custom--spacing--1-5-rem);
    width: var(--wp--custom--spacing--1-5-rem);
    display: flex;
    align-items: center;
    position: relative;
    top: -2px;
}

.iconified-buttons__icon svg {
    margin-top: -1px;
    color: inherit;
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
    padding: calc(0.667em + 2px) calc(1.333em + 0px);
}

/* Tertiary Button Backwards
Will always contain an arrow forward icon –>
--------------------------------------------- */
.wp-block-button.is-style-tertiary-back > .wp-element-button {
    height: auto;
    background-color: transparent;
    padding: 0;
    color: var(--wp--preset--color--red-50);
}
.wp-block-button.is-style-tertiary-back > .wp-element-button:hover {
    color: var(--wp--custom--color--hover);
}
.wp-block-button.is-style-tertiary-back > .wp-element-button:active {
    color: var(--wp--custom--color--active);
}
.wp-block-button.is-style-tertiary-back.disabled > .wp-element-button {
    color: var(--wp--custom--color--disabled);
}

.no-arrow > .wp-element-button > img {
    margin-top: -3px;
    margin-right: 8px;
}

.no-arrow > .wp-element-button > strong + img {
    margin-right: 0px;
    margin-left: 8px;
}

/* START BACKWARDS COMPATABILY */
/* :not([id^="iconified-button-"]) FOR BACKWARDS COMPATABILITY */
/* All  secondary (outline) and tertiary buttons always get a arrow_forward icon */
/* TODO: Could be deleted once all buttons are transformed
*/
.wp-block-button.is-style-outline:not([id^="iconified-button-"]) > .wp-element-button::after {
    content: "";
    width: var(--wp--custom--spacing--1-5-rem);
    height: var(--wp--custom--spacing--1-5-rem);
    background: url(/wp-content/themes/protektor/assets/icons/arrow_forward.svg);
    filter: invert(40%);
    position: relative;
    top: -2px;
}
.wp-block-button.is-style-outline:not([id^="iconified-button-"]) > .wp-element-button:hover::after {
    filter: invert(100%);
}
.wp-block-button.is-style-outline:not([id^="iconified-button-"]) > .wp-element-button:active::after {
    filter: invert(100%);
}
.wp-block-button.is-style-outline.disabled:not([id^="iconified-button-"]) > .wp-element-button::after {
    filter: invert(100%);
    color: var(--wp--custom--color--disabled) !important;
    border-color: var(--wp--custom--color--disabled);
}

.wp-block-button.is-style-tertiary:not([id^="iconified-button-"]) > .wp-element-button::after {
    content: "";
    width: var(--wp--custom--spacing--1-5-rem);
    height: var(--wp--custom--spacing--1-5-rem);
    background: url(/wp-content/themes/protektor/assets/icons/arrow_forward.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: top;
    filter: invert(17%) sepia(94%) saturate(6263%) hue-rotate(358deg) brightness(94%) contrast(90%);
    position: relative;
    top: -2px;
}
.wp-block-button.is-style-tertiary:not([id^="iconified-button-"]) > .wp-element-button:hover::after {
    filter: invert(14%) sepia(56%) saturate(6940%) hue-rotate(357deg) brightness(85%) contrast(93%);
}
.wp-block-button.is-style-tertiary:not([id^="iconified-button-"]) > .wp-element-button:active::after {
    filter: invert(11%) sepia(69%) saturate(2786%) hue-rotate(346deg) brightness(123%) contrast(109%);
}
.wp-block-button.is-style-tertiary.disabled:not([id^="iconified-button-"]) > .wp-element-button::after {
    filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(48deg) brightness(104%) contrast(89%);
}
/* ^^^ END BACKWARDS COMPATABILY ^^^ */