.ds-banner-alert {
  background-color: var(--ds-color-london-95);
  border-left: 0.25rem solid var(--ds-color-london-35);
  box-sizing: border-box;
  display: flex;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  justify-content: space-between;
  line-height: var(--ds-type-leading-lower);
  padding: 0.625rem 0.75rem 0.625rem 0.5rem;
  position: relative;
  p {
    flex: 1;
  }
  strong {
    font-weight: 500;
  }
  .ds-control-close {
    flex: 0 0 1.5rem;
    height: 1.5rem;
    margin: 0 0 0 auto;
    width: 1.5rem;
  }
}

.ds-banner-alert-inner {
  display: flex;
  width: 100%;
}

.ds-banner-alert--error,
.ds-banner-alert--success,
.ds-banner-alert--warning {
  &::before {
    background-repeat: no-repeat;
    background-size: 1.25rem;
    content: '';
    flex: 0 0 1.25rem;
    height: 1.25rem;
    margin: 0 0.5rem 0 0.125rem;
    width: 1.25rem;
  }
}

.ds-banner-alert--error {
  background-color: var(--ds-color-tokyo-90);
  border-left-color: var(--ds-color-tokyo-55);
  &::before {
    background-image: url('eds://common/static/images/icons/material-alert--error.svg');
  }
}

.ds-banner-alert--success {
  background-color: var(--ds-color-chicago-90);
  border-left-color: var(--ds-color-chicago-55);
  &::before {
    background-image: url('eds://common/static/images/icons/material-alert--success.svg');
  }
}

.ds-banner-alert--warning {
  background-color: var(--ds-color-singapore-90);
  border-left-color: var(--ds-color-singapore-55);
  &::before {
    background-image: url('eds://common/static/images/icons/material-alert--warning.svg');
  }
}

@media (--ds-viewport-max-medium) {
  .ds-banner-alert {
    strong {
      display: block;
    }
  }
  .ds-banner-alert-inner {
    flex-direction: column;
  }
  .ds-banner-alert-button {
    padding: 0.5rem 0 0 0;
  }
}

@media (--ds-viewport-min-medium) {
  .ds-banner-alert {
    align-items: center;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
  .ds-banner-alert-inner {
    align-items: center;
  }
  .ds-banner-alert-button {
    padding: 0 1rem;
  }
}