/* ----------------- BUTTONS ----------------- */


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

    --button-unit-m: 1.75rem; /* 28px */
    --button-unit-l: calc(var(--button-unit-m) * 1.25); 
    --button-unit-s: calc(var(--button-unit-m) / 1.12); 
    --button-font-m: 1.125rem; /* 18px */
    --button-font-l: calc(var(--button-font-m) * 1.5); /* 24px */ 
    --button-font-s: calc(var(--button-font-m) / 1.125); /* 16px */
    --button-padding-m: 
        calc(var(--button-unit-m) / 3)
        calc(var(--button-unit-m) / 2)
        calc(var(--button-unit-m) / 3) 
        calc(var(--button-unit-m) / 2);
    --button-padding-s: 
        calc(var(--button-unit-s) / 3)
        calc(var(--button-unit-s) / 2)
        calc(var(--button-unit-s) / 3) 
        calc(var(--button-unit-s) / 2);
    --button-padding-l: 
        calc(var(--button-unit-l) / 3)
        calc(var(--button-unit-l) / 2)
        calc(var(--button-unit-l) / 3) 
        calc(var(--button-unit-l) / 2);
}

.tecs-button a,
button.tecs-button, 
input.tecs-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;

    /* 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 green default */
    background-color: transparent;
    color: var(--tecs-green-400);
    border-width: 1px;
    border-color: var(--tecs-green-400);
    border-style: solid;
}

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



button.tecs-button:hover,
input.tecs-button:hover,
.tecs-button a:hover{
    background-color: rgb(0,0,0,0.2);
}

button.tecs-button:focus-visible,
input.tecs-button:focus-visible,
.tecs-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 !important;
}


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



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



button.tecs-button-small,
input.tecs-button-small,
.tecs-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.tecs-button-large,
input.tecs-button-large,
.tecs-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.tecs-button,
    input.tecs-button,
    .tecs-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.tecs-button-large,
    input.tecs-button-large,
    .tecs-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);
    }     
}




/* -------------------------------------- */
/* - - - - - - - - COLOURS - - - - - - -  */
/* -------------------------------------- */



/* Primary Green outline */
button.tecs-button-colour-green-outline,
input.tecs-button-colour-green-outline,
.tecs-button-colour-green-outline a{
    background-color: transparent;
    color: var(--tecs-green-400);
    border-color: var(--tecs-green-400);
}
button.tecs-button-colour-green-outline:hover,
input.tecs-button-colour-green-outline:hover,
.tecs-button-colour-green-outline a:hover{
    background-color: rgb(0,0,0,0.2);
}
button.tecs-button-colour-green-outline::after,
input.tecs-button-colour-green-outline::after,
.tecs-button-colour-green-outline a::after{ 
    background-color: var(--tecs-green-400);
}




/* Primary White outline */
button.tecs-button-colour-white-outline,
input.tecs-button-colour-white-outline,
.tecs-button-colour-white-outline a{
    background-color: transparent;
    color: var(--tecs-white);
    border-color: var(--tecs-white);
}
button.tecs-button-colour-white-outline:hover,
input.tecs-button-colour-white-outline:hover,
.tecs-button-colour-white-outline a:hover{
    background-color: rgb(0,0,0,0.2);
}
button.tecs-button-colour-white-outline::after,
input.tecs-button-colour-white-outline::after,
.tecs-button-colour-white-outline a::after{ 
    background-color: var(--tecs-white);
}







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

.tecs-icon-pre a, 
.tecs-icon-post a,
button.tecs-icon-pre, 
button.tecs-icon-post,
input.tecs-icon-pre, 
input.tecs-icon-post{
    display: flex;
    gap: 0.75em;
    flex-wrap: nowrap;
    align-items: center;
}

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


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

button.tecs-icon-pre::after, 
button.tecs-icon-post::after,
input.tecs-icon-pre::after, 
input.tecs-icon-post::after,
.tecs-icon-pre > a::after, 
.tecs-icon-post > a::after{
    content: '';
    width: calc(var(--button-font-m) * 1.25); 
    height: calc(var(--button-font-m) * 1.25); 
    mask-image: var(--_button-icon); 
    -webkit-mask-image: var(--_button-icon);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    button.tecs-icon-pre::after, 
    button.tecs-icon-post::after,
    input.tecs-icon-pre::after, 
    input.tecs-icon-post::after,
    .tecs-icon-pre > a::after, 
    .tecs-icon-post > a::after{
        width: var(--button-font-s); 
        height: var(--button-font-s); 
    }
}

button.tecs-button-small.tecs-icon-pre::after, 
button.tecs-button-small.tecs-icon-post::after,
input.tecs-button-small.tecs-icon-pre::after, 
input.tecs-button-small.tecs-icon-post::after,
.tecs-button-small.tecs-icon-pre > a::after, 
.tecs-button-small.tecs-icon-post > a::after{
    width: var(--button-font-s); 
    height: var(--button-font-s); 
}
button.tecs-button-large.tecs-icon-pre::after, 
button.tecs-button-large.tecs-icon-post::after,
input.tecs-button-large.tecs-icon-pre::after, 
input.tecs-button-large.tecs-icon-post::after,
.tecs-button-large.tecs-icon-pre > a::after, 
.tecs-button-large.tecs-icon-post > a::after{
    width: var(--button-font-l); 
    height: var(--button-font-l); 
}

@media (max-width: 480px) {
    button.tecs-button-large.tecs-icon-pre::after, 
    button.tecs-button-large.tecs-icon-post::after,
    input.tecs-button-large.tecs-icon-pre::after, 
    input.tecs-button-large.tecs-icon-post::after,
    .tecs-button-large.tecs-icon-pre > a::after, 
    .tecs-button-large.tecs-icon-post > a::after{
        width: var(--button-font-m); 
        height: var(--button-font-m); 
    }
}




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


/* Alert */
button.tecs-button-alert::after,
input.tecs-button-alert::after,
.tecs-button-alert > a::after{ 
    --_button-icon: url("../assets/icons/alert.svg"); 
}

/* Alert Circle */
button.tecs-button-alert-circle::after,
input.tecs-button-alert-circle::after,
.tecs-button-alert-circle > a::after{ 
    --_button-icon: url("../assets/icons/alert-circle.svg"); 
}

/* Arrow Right */
button.tecs-button-arrow-right::after,
input.tecs-button-arrow-right::after,
.tecs-button-arrow-right > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right.svg"); 
}

/* Arrow Down */
button.tecs-button-arrow-down::after,
input.tecs-button-arrow-down::after,
.tecs-button-arrow-down > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right.svg"); 
    rotate: 90deg;
}

/* Arrow Left */
button.tecs-button-arrow-left::after,
input.tecs-button-arrow-left::after,
.tecs-button-arrow-left > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right.svg"); 
    rotate: 180deg;
}

/* Arrow Up */
button.tecs-button-arrow-up::after,
input.tecs-button-arrow-up::after,
.tecs-button-arrow-up > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right.svg"); 
    rotate: -90deg;
}

/* Arrow Right Circle */
button.tecs-button-arrow-right-circle::after,
input.tecs-button-arrow-right-circle::after,
.tecs-button-arrow-right-circle > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right-circle.svg"); 
}

/* Arrow Down Circle */
button.tecs-button-arrow-circle-down::after,
input.tecs-button-arrow-circle-down::after,
.tecs-button-arrow-circle-down > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right-circle.svg"); 
    rotate: 90deg;
}

/* Arrow Left Circle */
button.tecs-button-arrow-circle-left::after,
input.tecs-button-arrow-circle-left::after,
.tecs-button-arrow-circle-left > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right-circle.svg"); 
    rotate: 180deg;
}

/* Arrow Up Circle */
button.tecs-button-arrow-circle-up::after,
input.tecs-button-arrow-circle-up::after,
.tecs-button-arrow-circle-up > a::after{ 
    --_button-icon: url("../assets/icons/arrow-right-circle.svg"); 
    rotate: -90deg;
}

/* Chevron Right */
button.tecs-button-chevron-right::after,
input.tecs-button-chevron-right::after,
.tecs-button-chevron-right > a::after{ 
    --_button-icon: url("../assets/icons/chevron-right.svg"); 
    scale: 1.25;
}

/* Chevron Down */
button.tecs-button-chevron-down::after,
input.tecs-button-chevron-down::after,
.tecs-button-chevron-down > a::after{ 
    --_button-icon: url("../assets/icons/chevron-right.svg"); 
    rotate: 90deg;
    scale: 1.25;}

/* Chevron Left */
button.tecs-button-chevron-left::after,
input.tecs-button-chevron-left::after,
.tecs-button-chevron-left > a::after{ 
    --_button-icon: url("../assets/icons/chevron-right.svg"); 
    rotate: 180deg;
    scale: 1.25;
}

/* Chevron Up */
button.tecs-button-chevron-up::after,
input.tecs-button-chevron-up::after,
.tecs-button-chevron-up > a::after{ 
    --_button-icon: url("../assets/icons/chevron-right.svg"); 
    rotate: -90deg;
    scale: 1.25;
}

/* Download */
button.tecs-button-download::after,
input.tecs-button-download::after,
.tecs-button-download > a::after{ 
    --_button-icon: url("../assets/icons/download.svg"); 
}

/* Email */
button.tecs-button-email::after,
input.tecs-button-email::after,
.tecs-button-email > a::after{ 
    --_button-icon: url("../assets/icons/email.svg"); 
}

/* External */
button.tecs-button-external::after,
input.tecs-button-external::after,
.tecs-button-external > a::after{ 
    --_button-icon: url("../assets/icons/external.svg"); 
}

/* Magnify */
button.tecs-button-magnify::after,
input.tecs-button-magnify::after,
.tecs-button-magnify > a::after{ 
    --_button-icon: url("../assets/icons/magnify.svg"); 
}

/* Note */
button.tecs-button-note::after,
input.tecs-button-note::after,
.tecs-button-note > a::after{ 
    --_button-icon: url("../assets/icons/note.svg"); 
}

/* Pause */
button.tecs-button-pause::after,
input.tecs-button-pause::after,
.tecs-button-pause > a::after{ 
    --_button-icon: url("../assets/icons/pause.svg"); 
}

/* Play */
button.tecs-button-play::after,
input.tecs-button-play::after,
.tecs-button-play > a::after{ 
    --_button-icon: url("../assets/icons/play.svg"); 
}

/* Plus */
button.tecs-button-plus::after,
input.tecs-button-plus::after,
.tecs-button-plus > a::after{ 
    --_button-icon: url("../assets/icons/plus.svg"); 
}

/* Plus Circle */
button.tecs-button-plus-circle::after,
input.tecs-button-plus-circle::after,
.tecs-button-plus-circle > a::after{ 
    --_button-icon: url("../assets/icons/plus-circle.svg"); 
}

/* Rss */
button.tecs-button-rss::after,
input.tecs-button-rss::after,
.tecs-button-rss > a::after{ 
    --_button-icon: url("../assets/icons/rss.svg"); 
}

/* Share */
button.tecs-button-share::after,
input.tecs-button-share::after,
.tecs-button-share > a::after{ 
    --_button-icon: url("../assets/icons/share.svg"); 
}

/* Upload */
button.tecs-button-upload::after,
input.tecs-button-upload::after,
.tecs-button-upload > a::after{ 
    --_button-icon: url("../assets/icons/upload.svg"); 
}








/* INLINE GROUPS OF BUTTONS */

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