:root{--infoBlue:#2e86de;--infoBlueLight:#eff6fc;--successGreen:#329f5d;--successGreenLight:#eff7f2;--errorRed:#c2160a;--errorRedLight:#faedec;--warningOrange:#fa7f05;--warningOrangeLight:#fff5eb;--bodyTextColour:#212121}.alert{padding:1.25rem;display:grid;grid-gap:1.25rem;grid-template-columns:max-content auto;border-radius:4px;border-width:4px;border-left-style:solid;transition:.12s ease;position:relative;align-items:center;overflow:hidden;&:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;mix-blend-mode:soft-light;background:linear-gradient(90deg,hsla(0,0%,100%,0) 30%,#fff 56%,rgba(2,0,36,.1) 82%);z-index:1}.content,.icon{z-index:2}.icon{line-height:1}.title{font-weight:700}.content{max-width:60ch}&.alert--info{background-color:var(--infoBlueLight);border-left-color:var(--infoBlue);.icon{color:var(--infoBlue)}}&.alert--success{background-color:var(--successGreenLight);border-left-color:var(--successGreen);.icon{color:var(--successGreen)}}&.alert--error{background-color:var(--errorRedLight);border-left-color:var(--errorRed);.icon{color:var(--errorRed)}}&.alert--warning{background-color:var(--warningOrangeLight);border-left-color:var(--warningOrange);.icon{color:var(--warningOrange)}}}@media (max-width:767px){.alert{grid-template-columns:auto;padding:1rem;grid-gap:.75rem;.icon{font-size:1.5rem}.title{margin-bottom:.5rem}}}