/**
 * Alert
 */

// Dependencies
@use 'config/grid' as *;
@use 'config/status';
@use 'config/media';

// Declarations
.c-alert {
  background-color: var(--nyco-scale-2);

  align-items: stretch;
  display: flex;

  margin-bottom: var(--nyco-spacing-DEFAULT);
}

.c-alert__graphic {
  border-inline-start: calc(var(--nyco-spacing-DEFAULT) * 0.33) solid var(--nyco-scale-4);
  padding: calc(var(--nyco-spacing-DEFAULT) * 0.66);
  padding-inline-end: 0;
  margin-inline-end: calc(var(--nyco-grid) * 2);
  display: flex;
  align-items: center;
}

[class*="c-alert-status-"] > .c-alert__graphic {
  border-color: transparent;
}

.c-alert__graphic > [class*='icon-'] {
  width: var(--nyco-spacing-DEFAULT);
  height: var(--nyco-spacing-DEFAULT);
  display: block;
  max-width: inherit;
}

.c-alert__body {
  flex: 1 1 auto;
  padding-top: var(--nyco-spacing-DEFAULT);
  padding-bottom: var(--nyco-spacing-DEFAULT);
  padding-inline-end: var(--nyco-spacing-DEFAULT);
}

@each $type in ('primary', 'secondary', 'tertiary', 'alt') {
  .c-alert-status-#{$type} {
    @include status.base($type);
  }

  @include media.screens-and-prefers-scheme(dark) using ($scheme) {
    .#{$scheme}\:c-alert-status-#{$type} {
      @include status.base($type);
    }
  }
}