/* ==========================================================================
 * Alert
 * ========================================================================== */

.mds-c-alert {
  --mds-v-alert__background-color: var(--mds-t-background-color--neutral);
  --mds-v-alert__color: #fff;
  --mds-t-text-color--primary: var(--mds-v-alert__color);
  --mds-t-text-color--secondary: var(--mds-v-alert__color);
  --mds-t-text-color--tertiary: var(--mds-v-alert__color);
  --mds-t-text-color--accent: var(--mds-v-alert__color);

  align-items: flex-start;
  background-color: var(--mds-v-alert__background-color);
  border: 1px solid var(--mds-v-alert__background-color);
  border-radius: var(--mds-d-border-radius--default);
  box-shadow: var(--mds-d-elevation--1);
  color: var(--mds-t-text-color--primary);
  display: flex;
  justify-content: space-between;
  padding: var(--mds-d-spacing--med) var(--mds-d-spacing--lg);
  text-align: left;
  width: 100%;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  > .mds-c-buttons {
    position: relative;
  }

  &--appearance-square {
    border-radius: 0;
  }

  &--theme-dark {
    --mds-v-alert__background-color: var(
      --mds-t-background-color--inverse-primary
    );
    --mds-v-alert__color: var(--mds-t-text-color--inverse-primary);
  }

  &--theme-info {
    --mds-v-alert__background-color: var(--mds-t-color--blue);
  }

  &--theme-secondary {
    --mds-v-alert__background-color: var(--mds-t-color--neutral);
  }

  &--theme-success {
    --mds-v-alert__background-color: var(--mds-t-color--green);
  }

  &--theme-warning {
    --mds-v-alert__background-color: var(--mds-t-color--orange);
  }

  &--theme-danger {
    --mds-v-alert__background-color: var(--mds-t-color--red);
  }

  &__title {
    @mixin mds-m-heading--size-med;

    margin-bottom: var(--mds-d-spacing--sm);
  }

  &__content {
    @mixin mds-m-text--size-med;

    font-weight: var(--mds-d-font-weight--medium);
    overflow: hidden;
    overflow-wrap: break-word;

    &:not(:last-child) {
      margin-right: var(--mds-d-spacing--med);
    }

    :any-link {
      color: var(--mds-t-text-color--accent);
      font-weight: var(--mds-d-font-weight--bold);
      text-decoration: underline;
    }

    button {
      font-weight: var(--mds-d-font-weight--bold);
    }
  }
}