@use '@angular/material' as mat;
@reference 'tailwindcss';

:host {
  --emr-announcement-close-icon-color: var(--color-neutral-800);

  padding-inline-start: --spacing(5);
  padding-inline-end: --spacing(3);
  height: --spacing(11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: theme(--text-sm);

  &:has(.icon) {
    padding-inline-start: --spacing(3.5);
  }

  .content {
    display: flex;
    align-items: center;
    gap: --spacing(2.5);
  }

  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:hover {
      opacity: 100%;
    }
  }

  &:has(.close) {
    padding-inline-end: --spacing(1.5);
  }

  &[data-variant="default"],
  &[data-variant="neutral"] {
    background: var(--color-surface-container);

    .icon {
      color: var(--color-on-surface);
    }
  }

  &[data-variant="info"],
  &[data-variant="informative"] {
    background: var(--color-blue-container);

    .icon {
      color: var(--color-on-blue-container);
    }
  }

  &[data-variant="danger"],
  &[data-variant="negative"] {
    background: var(--color-red-container);

    .icon {
      color: var(--color-on-red-container);
    }
  }

  &[data-variant="success"],
  &[data-variant="positive"] {
    background: var(--color-green-container);

    .icon {
      color: var(--color-on-green-container);
    }
  }

  &[data-variant="warning"],
  &[data-variant="notice"] {
    background: var(--color-orange-container);

    .icon {
      color: var(--color-on-orange-container);
    }
  }
}
