/* ----------------- BUTTONS ----------------- */
/* this stylesheet sets up component buttons that can be used on <a> links (within classed element) or directly on <button> or <input>  */
/* use the generators/generator-button.html as a guide to generating the classes  */
/* NEW: use the template-part block when adding buttons/call to actions directly into the WordPress block editor for a more user friendly experience */


.eic-button{
    appearance: none;
    font-family: inherit;
    display: block;
    border: 0;

    /* set standard unit sizes */
    --button-unit-m: 30px;
    --button-font-m: 20px;

    /* auto calc large and small sizes */
    --button-unit-l: calc(var(--button-unit-m) * 1.25);
    --button-unit-s: calc(var(--button-unit-m) / 1.25);
    --button-font-l: calc(var(--button-font-m) * 1.25);
    --button-font-s: calc(var(--button-font-m) / 1.25);

    /* auto calc padding for s, m and l */
    --button-padding-m: 
        calc(var(--button-unit-m) / 2)
        calc(var(--button-unit-m) / 0.75)
        calc(var(--button-unit-m) / 2) 
        calc(var(--button-unit-m) / 0.75);
    --button-padding-s: 
        calc(var(--button-unit-s) / 2)
        calc(var(--button-unit-s) / 0.75)
        calc(var(--button-unit-s) / 2) 
        calc(var(--button-unit-s) / 0.75);
    --button-padding-l: 
        calc(var(--button-unit-l) / 2)
        calc(var(--button-unit-l) / 0.75)
        calc(var(--button-unit-l) / 2) 
        calc(var(--button-unit-l) / 0.75);
}

.eic-button a,
button.eic-button, 
input.eic-button{
    cursor: pointer;
    text-decoration: none;
    font-weight: 400;
    transition: 100ms;

    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    border-radius: calc(var(--button-unit-m) / 6);

    /* default size medium */
    font-size: var(--button-font-m);
    padding: var(--button-padding-m);
    line-height: var(--button-unit-m);
    gap: calc(var(--button-unit-m) / 3.75);

    /* primary default */
    background-color: var(--eic-red-700);
    color: var(--eic-red-50);
}

button.eic-button::after,
input.eic-button::after,
.eic-button a::after{ 
    background-color: white;
    flex-shrink: 0;
}



button.eic-button:hover,
input.eic-button:hover,
.eic-button a:hover{
    background-color: var(--eic-red-800);
}

button.eic-button:focus-visible,
input.eic-button:focus-visible,
.eic-button a:focus-visible{
    box-shadow: none;
    outline-width: 3px;
    outline-style: solid;
    outline-offset: 2px;
    outline-color: var(--govuk-link-colour);
    background-color: var(--govuk-focus-colour);
    color: black;
}

button.eic-button:active,
input.eic-button:active,
.eic-button a:active{
    border-bottom-width: 0px;
    transform: translateY(0.125em);
    margin-top: 0.125em;
}

button.eic-button:focus-visible::after,
input.eic-button:focus-visible::after,
.eic-button a:focus-visible::after{ 
    background-color: black;
}



/* - - - - - - - Sizes - - - - - - */



button.eic-button-small,
input.eic-button-small,
.eic-button-small > a {
    font-size: var(--button-font-s);
    padding: var(--button-padding-s);
    line-height: var(--button-unit-s);
    gap: calc(var(--button-unit-s) / 3.75);
}

button.eic-button-large,
input.eic-button-large,
.eic-button-large > a {
    font-size: var(--button-font-l);
    padding: var(--button-padding-l);
    line-height: var(--button-unit-l);
    gap: calc(var(--button-unit-l) / 3.75);
}

/* on mobile: large -> medium, medium -> small, small stays the same */
@media (max-width: 480px) {
    button.eic-button,
    input.eic-button,
    .eic-button > a {
        font-size: var(--button-font-s);
        padding: var(--button-padding-s);
        line-height: var(--button-unit-s);
        gap: calc(var(--button-unit-s) / 3.75);
    }     

    button.eic-button-large,
    input.eic-button-large,
    .eic-button-large > a {
        font-size: var(--button-font-m);
        padding: var(--button-padding-m);
        line-height: var(--button-unit-m);
        gap: calc(var(--button-unit-m) / 3.75);
    }     
}

button.eic-button-full-width,
input.eic-button-full-width,
.eic-button-full-width > a {
    font-size: var(--button-font-l);
    padding: 2rem;
    line-height: var(--button-unit-l);
    gap: calc(var(--button-unit-l) / 3.75);
    width: 100%;
    justify-content: center;
}





/* - - - - - - - Navy - - - - - - */
 
button.eic-button-colour-navy,
input.eic-button-colour-navy,
.eic-button-colour-navy a{
    background-color: var(--eic-main-navy-950);
    color: var(--eic-main-navy-50);
}

button.eic-button-colour-navy:hover,
input.eic-button-colour-navy:hover,
.eic-button-colour-navy a:hover{
    background-color: var(--eic-main-navy-900);
}

button.eic-button-colour-navy::after,
input.eic-button-colour-navy::after,
.eic-button-colour-navy a::after{ 
    background-color: var(--eic-main-navy-50);
}


/* - - - - - - - Outline varients   - - - - - - */


button[class*="outline"],
input[class*="outline"],
[class*="outline"] a{
    border-width: 3px; 
    border-style: solid;
    background-color: transparent;
        box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

}

/* hovers use rgb values so can use 0.1 opacity */


/* - - - - - - - Outline Navy   - - - - - - */
 
button.eic-button-colour-outline-navy,
input.eic-button-colour-outline-navy,
.eic-button-colour-outline-navy a{
    border-color: var(--eic-main-navy-950);
    color: var(--eic-main-navy-950);
}

button.eic-button-colour-outline-navy:hover,
input.eic-button-colour-outline-navy:hover,
.eic-button-colour-outline-navy a:hover{
    background-color: rgb(26, 20, 99, 0.1);
}

button.eic-button-colour-outline-navy::after,
input.eic-button-colour-outline-navy::after,
.eic-button-colour-outline-navy a::after{ 
    background-color: var(--eic-main-navy-950);
}


/* - - - - - - - Outline Red   - - - - - - */
 
button.eic-button-colour-outline-red,
input.eic-button-colour-outline-red,
.eic-button-colour-outline-red a{
    border-color: var(--eic-red-600);
    color: var(--eic-red-700);
}

button.eic-button-colour-outline-red:hover,
input.eic-button-colour-outline-red:hover,
.eic-button-colour-outline-red a:hover{
    background-color: rgb(228, 30, 124, 0.1);
}

button.eic-button-colour-outline-red::after,
input.eic-button-colour-outline-red::after,
.eic-button-colour-outline-red a::after{ 
    background-color: var(--eic-red-600);
}



/* - - - - - - - Outline White   - - - - - - */
 
button.eic-button-colour-outline-white,
input.eic-button-colour-outline-white,
.eic-button-colour-outline-white a{
    border-color: var(--eic-white);
    color: var(--eic-white);
}

button.eic-button-colour-outline-white:hover,
input.eic-button-colour-outline-white:hover,
.eic-button-colour-outline-white a:hover{
    background-color: rgb(255, 255, 255, 0.1);
}

button.eic-button-colour-outline-white::after,
input.eic-button-colour-outline-white::after,
.eic-button-colour-outline-white a::after{ 
    background-color: var(--eic-white);
}









/* - - - - - - - Icon placement - - - - - - */

.eic-icon-pre a, 
.eic-icon-post a,
button.eic-icon-pre, 
button.eic-icon-post,
input.eic-icon-pre, 
input.eic-icon-post{
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 640px) {
    .eic-icon-pre a, 
    .eic-icon-post a,
    button.eic-icon-pre, 
    button.eic-icon-post,
    input.eic-icon-pre, 
    input.eic-icon-post{
        gap: 7px;
    }
}
@media (max-width: 480px) {
    .eic-icon-pre a, 
    .eic-icon-post a,
    button.eic-icon-pre, 
    button.eic-icon-post,
    input.eic-icon-pre, 
    input.eic-icon-post{
        gap: 4px;
    }
}


.eic-icon-pre a,
button.eic-icon-pre,
input.eic-icon-pre{
    flex-direction: row-reverse;
}



/* adjust smaller amounts of padding around icon */
/* left */
/* .eic-icon-pre.eic-button-small a,
button.eic-icon-pre.eic-button-small,
input.eic-icon-pre.eic-button-small{
    padding-left: calc(var(--button-unit-s) / 2.5);
}
.eic-icon-pre a,
button.eic-icon-pre,
input.eic-icon-pre{
    padding-left: calc(var(--button-unit-m) / 2.5);
}
.eic-icon-pre.eic-button-large a,
button.eic-icon-pre.eic-button-large,
input.eic-icon-pre.eic-button-large{
    padding-left: calc(var(--button-unit-l) / 2.5);
}
*/
/* right */
/*
.eic-icon-post.eic-button-small a,
button.eic-icon-post.eic-button-small,
input.eic-icon-post.eic-button-small{
    padding-right: calc(var(--button-unit-s) / 2.5);
}
.eic-icon-post a,
button.eic-icon-post,
input.eic-icon-post{
    padding-right: calc(var(--button-unit-m) / 2.5);
}
.eic-icon-post.eic-button-large a,
button.eic-icon-post.eic-button-large,
input.eic-icon-post.eic-button-large{
    padding-right: calc(var(--button-unit-l) / 2.5);
} */




button.eic-icon-pre::after, 
button.eic-icon-post::after,
input.eic-icon-pre::after, 
input.eic-icon-post::after,
.eic-icon-pre > a::after, 
.eic-icon-post > a::after{
    content: '';
    width: calc(var(--button-unit-m) / 1.1); 
    height: calc(var(--button-unit-m) / 1.1); 
    mask-image: var(--_button-icon); 
    -webkit-mask-image: var(--_button-icon);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 100%;
    -webkit-mask-position: 100%;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    button.eic-icon-pre::after, 
    button.eic-icon-post::after,
    input.eic-icon-pre::after, 
    input.eic-icon-post::after,
    .eic-icon-pre > a::after, 
    .eic-icon-post > a::after{
        width: calc(var(--button-unit-s) / 1.1); 
        height: calc(var(--button-unit-s) / 1.1); 
    }
}

button.eic-button-small.eic-icon-pre::after, 
button.eic-button-small.eic-icon-post::after,
input.eic-button-small.eic-icon-pre::after, 
input.eic-button-small.eic-icon-post::after,
.eic-button-small.eic-icon-pre > a::after, 
.eic-button-small.eic-icon-post > a::after{
    width: calc(var(--button-unit-s) / 1.1); 
    height: calc(var(--button-unit-s) / 1.1); 
}
button.eic-button-large.eic-icon-pre::after, 
button.eic-button-large.eic-icon-post::after,
input.eic-button-large.eic-icon-pre::after, 
input.eic-button-large.eic-icon-post::after,
.eic-button-large.eic-icon-pre > a::after, 
.eic-button-large.eic-icon-post > a::after{
    width: calc(var(--button-unit-l) / 1.1); 
    height: calc(var(--button-unit-l) / 1.1); 
}

@media (max-width: 480px) {
    button.eic-button-large.eic-icon-pre::after, 
    button.eic-button-large.eic-icon-post::after,
    input.eic-button-large.eic-icon-pre::after, 
    input.eic-button-large.eic-icon-post::after,
    .eic-button-large.eic-icon-pre > a::after, 
    .eic-button-large.eic-icon-post > a::after{
        width: calc(var(--button-unit-m) / 1.1); 
        height: calc(var(--button-unit-m) / 1.1); 
    }
}




/* - - - - - - - Icon files - - - - - - */




button.eic-button-icon-arrow-right::after,
input.eic-button-icon-arrow-right::after,
.eic-button-icon-arrow-right > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/arrow-right.svg");
}
button.eic-button-icon-arrow-left::after,
input.eic-button-icon-arrow-left::after,
.eic-button-icon-arrow-left > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/arrow-left.svg"); 
}
button.eic-button-icon-arrow-down::after,
input.eic-button-icon-arrow-down::after,
.eic-button-icon-arrow-down > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/arrow-down.svg"); 
}
button.eic-button-icon-close::after,
input.eic-button-icon-close::after,
.eic-button-icon-close > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/close.svg"); 
}
button.eic-button-icon-document::after,
input.eic-button-icon-document::after,
.eic-button-icon-document > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/document.svg"); 
}
button.eic-button-icon-download::after,
input.eic-button-icon-download::after,
.eic-button-icon-download > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/download.svg"); 
}
button.eic-button-icon-email::after,
input.eic-button-icon-email::after,
.eic-button-icon-email > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/email.svg"); 
}
button.eic-button-icon-external::after,
input.eic-button-icon-external::after,
.eic-button-icon-external > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/external.svg"); 
}
button.eic-button-icon-chevron-left::after,
input.eic-button-icon-chevron-left::after,
.eic-button-icon-chevron-left > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/chevron-left.svg"); 
}
button.eic-button-icon-chevron-right::after,
input.eic-button-icon-chevron-right::after,
.eic-button-icon-chevron-right > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/chevron-right.svg"); 
}
button.eic-button-icon-search::after,
input.eic-button-icon-search::after,
.eic-button-icon-search > a::after{ 
    --_button-icon: url("../images/icons/eic-button-icons/search.svg"); 
}






/* INLINE GROUPS OF BUTTONS */

.eic-button-group-inline{
    display: flex;
    gap: 1rem;
}