/* ----------------- D102 Colours ----------------- */




:root{
    /* --d102-navy-rgb: 18, 46, 71;
    --d102-orange-rgb: 255, 138, 0;
    --d102-blue-rgb: 36, 166, 214;
    --d102-green-rgb: 128, 189, 89;
    --d102-purple-rgb: 146, 145, 199;
    --d102-yellow-rgb: 255, 199, 46;
    --d102-pink-rgb: 237, 120, 145;
    --d102-grey-rgb: 136, 137, 141;

    --d102-navy-darktext-hex: #132F48;
    --d102-orange-darktext-hex: #663600;
    --d102-blue-darktext-hex: #0B465B;
    --d102-green-darktext-hex: #324E1D;
    --d102-purple-darktext-hex: #403C77;
    --d102-yellow-darktext-hex: #614700;
    --d102-pink-darktext-hex: #87122C;
    --d102-grey-darktext-hex: #3D4142; */

    --d102-hex-navy-100: #132F48;
    --d102-hex-navy-80: #566B7D;
    --d102-hex-navy-60: #86929E;
    --d102-hex-navy-40: #AEB7BF;
    --d102-hex-navy-20: #D7DADE;
    --d102-hex-orange-100: #FF8900;
    --d102-hex-orange-80: #F3B05E;
    --d102-hex-orange-60: #F5C486;
    --d102-hex-orange-40: #F8D7AD;
    --d102-hex-orange-20: #FAEAD5;
    --d102-hex-blue-100: #24A6D6;
    --d102-hex-blue-80: #7CC1DF;
    --d102-hex-blue-60: #99CFE7;
    --d102-hex-blue-40: #BBDEEE;
    --d102-hex-blue-20: #DCEDF5;
    --d102-hex-green-100: #80BD59;
    --d102-hex-green-80: #AFCD92;
    --d102-hex-green-60: #C2D9AE;
    --d102-hex-green-40: #D7E5C9;
    --d102-hex-green-20: #E9F1E3;
    --d102-hex-purple-100: #9291C7;
    --d102-hex-purple-80: #B3B5D5;
    --d102-hex-purple-60: #C6C8DF;
    --d102-hex-purple-40: #D9D9E9;
    --d102-hex-purple-20: #EBEBF3;
    --d102-hex-yellow-100: #FFC72E;
    --d102-hex-yellow-80: #F7D680;
    --d102-hex-yellow-60: #F9E09D;
    --d102-hex-yellow-40: #FAEABC;
    --d102-hex-yellow-20: #FBF3DD;
    --d102-hex-pink-100: #ED7891;
    --d102-hex-pink-80: #E8A8B3;
    --d102-hex-pink-60: #EDBDC6;
    --d102-hex-pink-40: #F2D3D9;
    --d102-hex-pink-20: #F6E8EB;
    --d102-hex-grey-100: #88898D;
    --d102-hex-grey-80: #ADAEB0;
    --d102-hex-grey-60: #C2C2C4;
    --d102-hex-grey-40: #D5D6D7;
    --d102-hex-grey-20: #E9E9EA;

    --govuk-focus: #ffdd00;

}


/* ----------------- ALERT ----------------- */


.d102-alert{
    border-width: 1px;
    border-style: solid;
    /* border-color: var(--d102-hex-grey-40); */
    border-radius: 3px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-block: 2rem;
}

/* colours */
.d102-alert--neutral{
    background-color: var(--d102-hex-grey-20);
    border-color: var(--d102-hex-grey-40);
}
.d102-alert--neutral::before{    
    background-color: var(--d102-hex-grey-100);
}

.d102-alert--pink{
    background-color: var(--d102-hex-pink-20);
    border-color: var(--d102-hex-pink-40);
}
.d102-alert--pink::before{    
    background-color: var(--d102-hex-pink-100);
}

.d102-alert--green{
    background-color: var(--d102-hex-green-20);
    border-color: var(--d102-hex-green-40);
}
.d102-alert--green::before{    
    background-color: var(--d102-hex-green-100);
}


/* icons */

.d102-alert--icon--info{
    --_alert-icon: url('https://api.iconify.design/material-symbols:info-rounded.svg');
}
.d102-alert--icon--warning{
    --_alert-icon: url('https://api.iconify.design/material-symbols:warning-rounded.svg');
}
.d102-alert--icon--tick{
    --_alert-icon: url('https://api.iconify.design/icon-park-solid:correct.svg');
}

[class*="d102-alert--icon"]:before{
    content: '';
    width: 30px;
    height: 30px;
    mask-image: var(--_alert-icon);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--_alert-icon);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}