/* ==========================================================================
 * Alerts
 * ========================================================================== */

.mds-c-alerts {
  --mds-v-alerts__spacing: var(--mds-d-spacing--xl);

  margin: calc(var(--mds-v-alerts__spacing) * -1);
  overflow: hidden;
  padding: var(--mds-v-alerts__spacing);
  width: calc(100% + (var(--mds-v-alerts__spacing) * 2));

  &:not(:last-child) {
    margin-bottom: 0;
  }

  &:empty {
    display: none;
  }

  &--position-absolute-right {
    bottom: var(--mds-d-spacing--xl);
    margin: 0;
    max-width: calc(100% - 3rem);
    overflow: visible;
    padding: 0;
    position: absolute;
    right: var(--mds-d-spacing--xl);
    width: auto;
    z-index: $z-index--alerts;

    &.mds-c-alerts--offset-sm {
      right: calc(var(--mds-d-spacing--xl) + $navigation-width--sm);
    }

    &.mds-c-alerts--offset-lg {
      right: calc(var(--mds-d-spacing--xl) + $navigation-width--lg);
    }

    &.mds-c-alerts--underlay {
      z-index: $z-index--underlay;
    }
  }

  &--position-absolute-left {
    bottom: var(--mds-d-spacing--xl);
    left: var(--mds-d-spacing--xl);
    margin: 0;
    max-width: calc(100% - 3rem);
    overflow: visible;
    padding: 0;
    position: absolute;
    width: auto;
    z-index: $z-index--alerts;

    &.mds-c-alerts--offset-sm {
      left: calc(var(--mds-d-spacing--xl) + $navigation-width--sm);
    }

    &.mds-c-alerts--offset-lg {
      left: calc(var(--mds-d-spacing--xl) + $navigation-width--lg);
    }

    &.mds-c-alerts--underlay {
      z-index: $z-index--underlay;
    }
  }

  &--position-global {
    flex-shrink: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;

    > .mds-c-alert {
      border-radius: 0;

      &:not(:last-child) {
        margin-bottom: 0;
      }
    }
  }
}