.banner {
  box-shadow: $base-elevation-modal;

  &-content {
    display: flex;
    width: 100%;
    align-items: center;
  }

  &-close {
    cursor: pointer;
    flex-grow: 1;
    max-width: 16px;
    min-width: 16px;
  }

  a {
    color: $sky-blue-500;
  }

  p {
    display: flex;
    padding: $base-spacing-3-4th;
    padding-left: 0;
    margin: 0;
    flex-grow: 1;
  }

  &.neutral {
    background-color: $sky-blue-100;
  }

  &.error {
    background-color: $base-state-error-lt;

    .banner-content::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12,2 C14.5763911,2 16.9252188,2.97431498 18.6981258,4.57458768 C18.7256684,4.59185887 18.7521101,4.61202589 18.7768226,4.63518803 C18.7995078,4.65644997 18.8197687,4.67932921 18.8375941,4.70347961 C20.7841612,6.52785083 22,9.12193823 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M18.4457237,5.71885915 L6.14914564,18.8388956 C7.72248494,20.1861962 9.76620543,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,9.55657706 20.0262879,7.34057676 18.4457237,5.71885915 Z M12,3 C7.02943725,3 3,7.02943725 3,12 C3,14.3770136 3.92150271,16.5387988 5.42675494,18.1476022 L17.7097828,5.04276693 C16.1562494,3.76629696 14.1676138,3 12,3 Z"/></svg>');
      width: 24px;
      height: 24px;
      margin-right: $base-spacing-3-4th;
    }
  }

  &.warning {
    background-color: $base-state-info-lt;

    .banner-content::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5432415,2.27638693 C11.713492,1.93620712 12.1751125,1.91005274 12.390172,2.19790782 L12.4384888,2.27641345 L21.946526,21.2773669 C22.1002734,21.584617 21.9052552,21.9418394 21.5813837,21.994373 L21.4978587,22.0009535 L2.50005913,21.9616197 C2.1570639,21.9609096 1.9251758,21.6278685 2.0222352,21.3154724 L2.05347919,21.2380077 L11.5432415,2.27638693 Z M11.9898576,3.61780154 L3.30997394,20.9628015 L20.6887586,20.9988015 L11.9898576,3.61780154 Z M11.9908585,15.9938015 C12.5436454,15.9938015 12.9917676,16.4415168 12.9917676,16.9938015 C12.9917676,17.5460863 12.5436454,17.9938015 11.9908585,17.9938015 C11.4380717,17.9938015 10.9899494,17.5460863 10.9899494,16.9938015 C10.9899494,16.4415168 11.4380717,15.9938015 11.9908585,15.9938015 Z M11.9908585,10.0272592 C12.2365416,10.0272592 12.4408757,10.2041344 12.4832501,10.4373836 L12.4913131,10.5272592 L12.4913131,14.5067898 C12.4913131,14.7829322 12.267252,15.0067898 11.9908585,15.0067898 C11.7451755,15.0067898 11.5408414,14.8299146 11.498467,14.5966654 L11.490404,14.5067898 L11.490404,10.5272592 C11.490404,10.2511168 11.7144651,10.0272592 11.9908585,10.0272592 Z"/></svg>');
      width: 24px;
      height: 24px;
      margin-right: $base-spacing-3-4th;
    }
  }

  &.success {
    background-color: $base-state-success-lt;

    .banner-content::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.7643505,7.08969288 C16.9658625,7.22984799 17.0324657,7.49162162 16.9340388,7.70728262 L16.8893341,7.78566637 L10.6296784,16.7856664 C10.4562729,17.0349851 10.1099771,17.0684608 9.89169977,16.8782781 L9.82409483,16.8065895 L7.08375055,13.2731048 C6.91452051,13.0548943 6.95422698,12.7408118 7.17243743,12.5715817 C7.36640228,12.421155 7.63611795,12.4358139 7.81251581,12.5941848 L7.87396052,12.6602686 L10.197,15.655 L16.068377,7.2146765 C16.2260515,6.98797545 16.5376494,6.93201838 16.7643505,7.08969288 Z"/></svg>');
      width: 24px;
      height: 24px;
      margin-right: $base-spacing-3-4th;
    }
  }
}