.md-alert-banner-wrapper {
  display: flex;
  border-radius: 0.5rem;
  margin: 0.5rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 25rem;

  &[data-static='true'] {
    background-color: var(--mds-color-theme-background-solid-primary-normal);
    border: 0.0625rem solid var(--mds-color-theme-outline-secondary-normal);
    color: var(--mds-color-theme-text-primary-normal);

    > .md-alert-banner-buttons > * {
      background-color: var(--mds-color-theme-button-secondary-normal);
      color: var(--mds-color-theme-text-primary-normal);

      &:hover {
        color: var(--mds-color-theme-text-primary-normal);
      }

      &:active {
        background-color: var(--mds-color-theme-button-secondary-pressed);
        color: var(--mds-color-theme-text-primary-normal);
      }
    }
  }

  &[data-color='default'] {
    background-color: var(--mds-color-theme-background-alert-default-normal);
    color: var(--mds-color-theme-text-secondary-normal);

    > .md-alert-banner-buttons > * {
      background-color: var(--mds-color-theme-background-alert-default-normal);
      color: var(--mds-color-theme-text-secondary-normal);

      &:hover {
        color: var(--mds-color-theme-text-primary-normal);
      }

      &:active {
        color: var(--mds-color-theme-text-primary-normal);
        background-color: var(--mds-color-theme-background-alert-default-active);
      }
    }
  }

  &[data-color='error'] {
    background-color: var(--mds-color-theme-background-alert-error-normal);
    color: var(--mds-color-theme-text-error-normal);

    > .md-alert-banner-buttons > * {
      color: var(--mds-color-theme-text-error-normal);
      background-color: var(--mds-color-theme-background-alert-error-normal);

      &:hover {
        color: var(--mds-color-theme-text-error-hover);
      }

      &:active {
        color: var(--mds-color-theme-text-error-active);
        background-color: var(--mds-color-theme-background-alert-error-active);
      }
    }
  }

  &[data-color='success'] {
    background-color: var(--mds-color-theme-background-alert-success-normal);
    color: var(--mds-color-theme-text-success-normal);

    > .md-alert-banner-buttons > * {
      color: var(--mds-color-theme-text-success-normal);
      background-color: var(--mds-color-theme-background-alert-success-normal);

      &:hover {
        color: var(--mds-color-theme-text-success-hover);
      }

      &:active {
        color: var(--mds-color-theme-text-success-active);
        background-color: var(--mds-color-theme-background-alert-success-active);
      }
    }
  }

  &[data-color='theme'] {
    background-color: var(--mds-color-theme-background-alert-theme-normal);
    color: var(--mds-color-theme-text-accent-normal);

    > .md-alert-banner-buttons > * {
      color: var(--mds-color-theme-text-accent-normal);
      background-color: var(--mds-color-theme-background-alert-theme-normal);

      &:hover {
        color: var(--mds-color-theme-text-accent-hover);
      }

      &:active {
        color: var(--mds-color-theme-text-accent-active);
        background-color: var(--mds-color-theme-background-alert-theme-active);
      }
    }
  }

  &[data-color='warning'] {
    background-color: var(--mds-color-theme-background-alert-warning-normal);
    color: var(--mds-color-theme-text-warning-normal);

    > .md-alert-banner-buttons > * {
      color: var(--mds-color-theme-text-warning-normal);
      background-color: var(--mds-color-theme-background-alert-warning-normal);

      &:hover {
        color: var(--mds-color-theme-text-warning-hover);
      }

      &:active {
        color: var(--mds-color-theme-text-warning-active);
        background-color: var(--mds-color-theme-background-alert-warning-active);
      }
    }
  }

  &[data-size='small'] {
    font-size: 0.875rem;
    height: fit-content;
    min-height: 1.25rem;
  }

  &[data-size='default'] {
    font-size: 1rem;
    height: fit-content;
    min-height: 1.375rem;
  }

  &[data-grow='true'] {
    width: auto;
  }

  &[data-pill='true'] {
    border-radius: 100vh;

    > .md-alert-banner-image {
      align-self: center;
    }

    > .md-alert-banner-buttons {
      > .md-alert-banner-button:last-child {
        border-radius: 0 100vh 100vh 0;
      }
    }
  }

  > .md-alert-banner-image {
    align-self: flex-start;
    flex-shrink: 0;
    margin: 0.625rem 0.75rem;
  }

  > .md-alert-banner-label {
    flex-grow: 1;
    flex-wrap: wrap;
    height: fit-content;
    line-height: 1.25rem;
    margin: 0.5rem 1rem 0.5rem 0rem;
    white-space: pre-wrap;
  }

  > .md-alert-banner-buttons {
    align-items: center;
    align-self: stretch;
    display: flex;

    > .md-alert-banner-button {
      align-items: center;
      border: var(--md-globals-border-clear);
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      margin: 0;
      outline: none;
      padding: 0;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
      width: 2rem;
    }

    > .md-alert-banner-button:last-child {
      border-radius: 0 0.5rem 0.5rem 0;
    }
  }

  &[data-centered='true'] {
    justify-content: center;

    > .md-alert-banner-image {
      display: flex;
      flex-grow: 1;
      justify-content: flex-end;
    }

    > .md-alert-banner-label {
      flex-grow: 0;
      flex-wrap: nowrap;
      align-self: center;
    }

    > .md-alert-banner-buttons {
      flex-basis: 0;
      flex-grow: 1;
      justify-content: flex-end;
    }
  }
}