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


.csprp-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) / 1)
        calc(var(--button-unit-m) / 3) 
        calc(var(--button-unit-m) / 1);
    --button-padding-s: 
        calc(var(--button-unit-s) / 3)
        calc(var(--button-unit-s) / 1)
        calc(var(--button-unit-s) / 3) 
        calc(var(--button-unit-s) / 1);
    --button-padding-l: 
        calc(var(--button-unit-l) / 3)
        calc(var(--button-unit-l) / 1)
        calc(var(--button-unit-l) / 3) 
        calc(var(--button-unit-l) / 1);
}

.csprp-button a,
button.csprp-button, 
input.csprp-button{
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    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);
    border-radius: var(--button-unit-m);

    /* primary default */
    background-color: var(--csprp-darkteal-core);
    color: var(--csprp-white);
}

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



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

button.csprp-button:focus-visible,
input.csprp-button:focus-visible,
.csprp-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.csprp-button:active,
input.csprp-button:active,
.csprp-button a:active{
    border-bottom-width: 0px;
    transform: translateY(0.125em);
    margin-top: 0.125em;
} */

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



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



button.csprp-button-small,
input.csprp-button-small,
.csprp-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.csprp-button-large,
input.csprp-button-large,
.csprp-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.csprp-button,
    input.csprp-button,
    .csprp-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.csprp-button-large,
    input.csprp-button-large,
    .csprp-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.csprp-button-full-width,
input.csprp-button-full-width,
.csprp-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;
}





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



/* Primary Dark Teal */
button.csprp-button-colour-darkteal,
input.csprp-button-colour-darkteal,
.csprp-button-colour-darkteal a{
    background-color: var(--csprp-darkteal-core);
    color: var(--csprp-white) !important;
}
button.csprp-button-colour-darkteal:hover,
input.csprp-button-colour-darkteal:hover,
.csprp-button-colour-darkteal a:hover{
    background-color: var(--csprp-darkteal-900);
    color: var(--csprp-white);
}
button.csprp-button-colour-darkteal::after,
input.csprp-button-colour-darkteal::after,
.csprp-button-colour-darkteal a::after{ 
    background-color: var(--csprp-white);
}


/* Primary Dark Purple */
button.csprp-button-colour-darkpurple,
input.csprp-button-colour-darkpurple,
.csprp-button-colour-darkpurple a{
    background-color: var(--csprp-darkpurple-core);
    color: var(--csprp-white) !important;
}
button.csprp-button-colour-darkpurple:hover,
input.csprp-button-colour-darkpurple:hover,
.csprp-button-colour-darkpurple a:hover{
    background-color: var(--csprp-darkpurple-900);
    color: var(--csprp-white);
}
button.csprp-button-colour-darkpurple::after,
input.csprp-button-colour-darkpurple::after,
.csprp-button-colour-darkpurple a::after{ 
    background-color: var(--csprp-white);
}

/* Primary Dark Blue */
button.csprp-button-colour-darkblue,
input.csprp-button-colour-darkblue,
.csprp-button-colour-darkblue a{
    background-color: var(--csprp-darkblue-core);
    color: var(--csprp-white) !important;
}
button.csprp-button-colour-darkblue:hover,
input.csprp-button-colour-darkblue:hover,
.csprp-button-colour-darkblue a:hover{
    background-color: var(--csprp-darkblue-900);
    color: var(--csprp-white);
}
button.csprp-button-colour-darkblue::after,
input.csprp-button-colour-darkblue::after,
.csprp-button-colour-darkblue a::after{ 
    background-color: var(--csprp-white);
}

/* Primary Dark Green */
button.csprp-button-colour-darkgreen,
input.csprp-button-colour-darkgreen,
.csprp-button-colour-darkgreen a{
    background-color: var(--csprp-darkgreen-core);
    color: var(--csprp-white) !important;
}
button.csprp-button-colour-darkgreen:hover,
input.csprp-button-colour-darkgreen:hover,
.csprp-button-colour-darkgreen a:hover{
    background-color: var(--csprp-darkgreen-900);
    color: var(--csprp-white);
}
button.csprp-button-colour-darkgreen::after,
input.csprp-button-colour-darkgreen::after,
.csprp-button-colour-darkgreen a::after{ 
    background-color: var(--csprp-white);
}

/* Primary Dark Pink */
button.csprp-button-colour-darkpink,
input.csprp-button-colour-darkpink,
.csprp-button-colour-darkpink a{
    background-color: var(--csprp-darkpink-core);
    color: var(--csprp-white) !important;
}
button.csprp-button-colour-darkpink:hover,
input.csprp-button-colour-darkpink:hover,
.csprp-button-colour-darkpink a:hover{
    background-color: var(--csprp-darkpink-900);
    color: var(--csprp-white);
}
button.csprp-button-colour-darkpink::after,
input.csprp-button-colour-darkpink::after,
.csprp-button-colour-darkpink a::after{ 
    background-color: var(--csprp-white);
}


/* - - - - - - - Lighter secondary palette - - - - - - */


/* Pink */
button.csprp-button-colour-pink,
input.csprp-button-colour-pink,
.csprp-button-colour-pink a{
    background-color: var(--csprp-pink-core);
    color: var(--csprp-pink-950) !important;
}
button.csprp-button-colour-pink:hover,
input.csprp-button-colour-pink:hover,
.csprp-button-colour-pink a:hover{
    background-color: var(--csprp-pink-200);
    color: var(--csprp-pink-950);
}
button.csprp-button-colour-pink::after,
input.csprp-button-colour-pink::after,
.csprp-button-colour-pink a::after{ 
    background-color: var(--csprp-pink-950);
}

/* orange */
button.csprp-button-colour-orange,
input.csprp-button-colour-orange,
.csprp-button-colour-orange a{
    background-color: var(--csprp-orange-core);
    color: var(--csprp-orange-950) !important;
}
button.csprp-button-colour-orange:hover,
input.csprp-button-colour-orange:hover,
.csprp-button-colour-orange a:hover{
    background-color: var(--csprp-orange-200);
    color: var(--csprp-orange-950);
}
button.csprp-button-colour-orange::after,
input.csprp-button-colour-orange::after,
.csprp-button-colour-orange a::after{ 
    background-color: var(--csprp-orange-950);
}

/* blue */
button.csprp-button-colour-blue,
input.csprp-button-colour-blue,
.csprp-button-colour-blue a{
    background-color: var(--csprp-blue-core);
    color: var(--csprp-blue-950) !important;
}
button.csprp-button-colour-blue:hover,
input.csprp-button-colour-blue:hover,
.csprp-button-colour-blue a:hover{
    background-color: var(--csprp-blue-200);
    color: var(--csprp-blue-950);
}
button.csprp-button-colour-blue::after,
input.csprp-button-colour-blue::after,
.csprp-button-colour-blue a::after{ 
    background-color: var(--csprp-blue-950);
}

/* green */
button.csprp-button-colour-green,
input.csprp-button-colour-green,
.csprp-button-colour-green a{
    background-color: var(--csprp-green-core);
    color: var(--csprp-green-950) !important;
}
button.csprp-button-colour-green:hover,
input.csprp-button-colour-green:hover,
.csprp-button-colour-green a:hover{
    background-color: var(--csprp-green-200);
    color: var(--csprp-green-950);
}
button.csprp-button-colour-green::after,
input.csprp-button-colour-green::after,
.csprp-button-colour-green a::after{ 
    background-color: var(--csprp-green-950);
}

/* yellow */
button.csprp-button-colour-yellow,
input.csprp-button-colour-yellow,
.csprp-button-colour-yellow a{
    background-color: var(--csprp-yellow-core);
    color: var(--csprp-yellow-950) !important;
}
button.csprp-button-colour-yellow:hover,
input.csprp-button-colour-yellow:hover,
.csprp-button-colour-yellow a:hover{
    background-color: var(--csprp-yellow-100);
    color: var(--csprp-yellow-950);
}
button.csprp-button-colour-yellow::after,
input.csprp-button-colour-yellow::after,
.csprp-button-colour-yellow a::after{ 
    background-color: var(--csprp-yellow-950);
}




/* - - - - - - - Link only - - - - - - */

/* button.csprp-button-colour-link,
input.csprp-button-colour-link,
.csprp-button-colour-link a{
    background-color: transparent;
    color: var(--govuk-link-colour);
    text-decoration: underline;
    border-bottom-color: transparent;
    border-bottom-width: 0;
    padding: 0;
}

button.csprp-button-colour-link:hover,
input.csprp-button-colour-link:hover,
.csprp-button-colour-link a:hover{
    background-color: transparent;
    color: var(--govuk-link-colour);
    border: none;
}

button.csprp-button-colour-link::after,
input.csprp-button-colour-link::after,
.csprp-button-colour-link a::after{ 
    background-color: var(--govuk-link-colour);
}

button.csprp-button-colour-link:focus-visible,
input.csprp-button-colour-link:focus-visible,
.csprp-button-colour-link a:focus-visible{
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: var(--govuk-focus-colour);
    box-shadow: 0 -2px var(--govuk-focus-colour), 0 4px #0b0c0c;
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

button.csprp-button-colour-link:active,
input.csprp-button-colour-link:active,
.csprp-button-colour-link a:active{
    border-bottom-width: 0px;
    transform: unset;
    margin-top: 0;
} */




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

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

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


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

button.csprp-icon-pre::after, 
button.csprp-icon-post::after,
input.csprp-icon-pre::after, 
input.csprp-icon-post::after,
.csprp-icon-pre > a::after, 
.csprp-icon-post > a::after{
    content: '';
    width: var(--button-font-m); 
    height: var(--button-font-m); 
    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.csprp-icon-pre::after, 
    button.csprp-icon-post::after,
    input.csprp-icon-pre::after, 
    input.csprp-icon-post::after,
    .csprp-icon-pre > a::after, 
    .csprp-icon-post > a::after{
        width: var(--button-font-s); 
        height: var(--button-font-s); 
    }
}

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

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




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




button.csprp-button-icon-arrow-right::after,
input.csprp-button-icon-arrow-right::after,
.csprp-button-icon-arrow-right > a::after{ 
    --_button-icon: url("../images/icons/button-icons/arrow-right.svg");
    width: calc(var(--button-font-m) / 0.8); 
}
button.csprp-button-icon-arrow-left::after,
input.csprp-button-icon-arrow-left::after,
.csprp-button-icon-arrow-left > a::after{ 
    --_button-icon: url("../images/icons/button-icons/arrow-right.svg"); 
    rotate: 180deg;
    width: calc(var(--button-font-m) / 0.8); 

}
button.csprp-button-icon-close::after,
input.csprp-button-icon-close::after,
.csprp-button-icon-close > a::after{ 
    --_button-icon: url("../images/icons/button-icons/close.svg"); 
}
button.csprp-button-icon-document::after,
input.csprp-button-icon-document::after,
.csprp-button-icon-document > a::after{ 
    --_button-icon: url("../images/icons/button-icons/doc.svg"); 
}
button.csprp-button-icon-documents::after,
input.csprp-button-icon-documents::after,
.csprp-button-icon-documents > a::after{ 
    --_button-icon: url("../images/icons/button-icons/docs.svg"); 
}
button.csprp-button-icon-download::after,
input.csprp-button-icon-download::after,
.csprp-button-icon-download > a::after{ 
    --_button-icon: url("../images/icons/button-icons/download.svg"); 
}
button.csprp-button-icon-email::after,
input.csprp-button-icon-email::after,
.csprp-button-icon-email > a::after{ 
    --_button-icon: url("../images/icons/button-icons/email.svg"); 
}
button.csprp-button-icon-external::after,
input.csprp-button-icon-external::after,
.csprp-button-icon-external > a::after{ 
    --_button-icon: url("../images/icons/button-icons/ext.svg"); 
}
button.csprp-button-icon-chevron-left::after,
input.csprp-button-icon-chevron-left::after,
.csprp-button-icon-chevron-left > a::after{ 
    --_button-icon: url("../images/icons/button-icons/chevron-right.svg"); 
    rotate: 180deg;
    width: calc(var(--button-font-m) / 2); 
}
button.csprp-button-icon-chevron-right::after,
input.csprp-button-icon-chevron-right::after,
.csprp-button-icon-chevron-right > a::after{ 
    --_button-icon: url("../images/icons/button-icons/chevron-right.svg"); 
    width: calc(var(--button-font-m) / 2); 
}

button.csprp-button-icon-chevron-right-dotted::after,
input.csprp-button-icon-chevron-right-dotted::after,
.csprp-button-icon-chevron-right-dotted > a::after{ 
    --_button-icon: url("../images/icons/button-icons/chevron-right-dotted.svg"); 
    width: calc(var(--button-font-m) / 2); 
}
button.csprp-button-icon-chevron-down-dotted::after,
input.csprp-button-icon-chevron-down-dotted::after,
.csprp-button-icon-chevron-down-dotted > a::after{ 
    --_button-icon: url("../images/icons/button-icons/chevron-right-dotted.svg"); 
    width: calc(var(--button-font-m) / 2); 
    rotate: 90deg;
}

button.csprp-button-icon-search::after,
input.csprp-button-icon-search::after,
.csprp-button-icon-search > a::after{ 
    --_button-icon: url("../images/icons/button-icons/search.svg"); 
}
button.csprp-button-icon-feed::after,
input.csprp-button-icon-feed::after,
.csprp-button-icon-feed > a::after{ 
    --_button-icon: url("../images/icons/button-icons/feed.svg"); 
}
button.csprp-button-icon-play::after,
input.csprp-button-icon-play::after,
.csprp-button-icon-play > a::after{ 
    --_button-icon: url("../images/icons/button-icons/play.svg"); 
}
button.csprp-button-icon-plus::after,
input.csprp-button-icon-plus::after,
.csprp-button-icon-plus > a::after{ 
    --_button-icon: url("../images/icons/button-icons/plus.svg"); 
}
button.csprp-button-icon-menu::after,
input.csprp-button-icon-menu::after,
.csprp-button-icon-menu > a::after{ 
    --_button-icon: url("../images/icons/button-icons/menu.svg"); 
}








/* INLINE GROUPS OF BUTTONS */

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