@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.ttf') format('truetype');
} 
.btn-control {
    background: var(--_background-colour);
    border-radius: var(--border-radius-full);
    border-radius: 50%;
    color: #fff;
    height: 40px;
    width: 40px;
    --_background-colour: var(--colour-brand-tag-red);
    --_text-colour: var(--colour-base-white);
    --_box-shadow-colour: var(--colour-brand-tag-red);
    --_disabled-background-colour: var(--colour-neutral-mid-grey);
    --_disabled-box-shadow-colour: var(--colour-neutral-mid-grey);
    --_background-colour--hover: var(--_background-colour);
    --_text-colour--hover: var(--_text-colour)
}

.btn-control--white {
    --_background-colour: var(--colour-base-white);
    --_text-colour: var(--colour-brand-primary)
}

.btn-control--alt {
    --_text-colour: var(--colour-brand-tag-red);
    --_background-colour: transparent;
    --_box-shadow-colour: var(--colour-brand-tag-red);
    --_disabled-background-colour: transparent;
    --_disabled-text-colour: var(--colour-neutral-mid-grey);
    --_disabled-box-shadow-colour: var(--colour-neutral-mid-grey)
}

.btn-control--alt.btn-control:before {
    font-size: var(--font-size-body-regular);
    font-weight: var(--font-weight-bold)
}

.btn-control[disabled] {
    --_text-colour: var(--_disabled-text-colour,var(--colour-base-white));
    --_background-colour: var( --_disabled-background-colour,var(--colour-neutral-mid-grey) );
    --_box-shadow-colour: var( --_disabled-box-shadow-colour,var(--colour-neutral-mid-grey) )
}
/*
.btn-control:before {
    content: var(--icon-arrow-right);
    font-family: icomoon;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    color: currentColor;
    font-size: var(--font-size-body-regular);
    justify-content: center
}
*/
.btn-control.btn-control--prev:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

button:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px
}