@use "sass:color";
@use "./../variables" as *;

.alert {
  --alert-padding-x: var(--spacer);
  --alert-padding-y: var(--spacer);
  --alert-border-width: 1px;
  --alert-border-style: solid;
  --alert-border-color: var(--border-color-main);
  --alert-border-radius: var(--border-radius-default);
  --alert-background: color-mix(in oklab, var(--html-color), #fff #{$alert-background-l});
  --alert-color: color-mix(in oklab, var(--html-color), #000 #{$alert-color-l});
  --alert-link-color: color-mix(in oklab, var(--html-color), #000 #{$alert-color-l});
  --alert-link-hover-color: color-mix(in oklab, var(--html-color), #000 #{$alert-color-l + $link-shade-percentage});

  color: var(--alert-color);
  border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  border-radius: var(--alert-border-radius);
  background: var(--alert-background);
  position: relative;

  // $alert-margin-fallback: if(sass($enable-margins): var(--spacer); else: 0);
  $alert-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--alert-margin-bottom, #{$alert-margin-fallback});

  @each $key in (1, 2, 3, 4, 5, 6) {
    h#{$key},
    .h#{$key} {
      --color: var(--alert-color);
    }
  }

  & > * {
    &:last-child {
      margin-bottom: 0;
    }
  }

  & a:not(.button),
  & .button--unstyled {
    color: var(--alert-link-color);
    font-weight: 600;

    &:hover,
    &:focus {
      color: var(--alert-link-hover-color);
    }
  }
}

@each $key, $value in $all-colors {
  .alert--#{$key} {
    --alert-border-color: color-mix(in oklab, var(--#{$key}), #fff #{$alert-border-l});
    --alert-background: color-mix(in oklab, var(--#{$key}), #fff #{$alert-background-l});
    --alert-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
    --alert-link-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l});
    --alert-link-hover-color: color-mix(in oklab, var(--#{$key}), #000 #{$alert-color-l + $link-shade-percentage});
  }
}