/*
 * --gl-alert-padding-x
 *
 * Way to hook into spacing of gl-alert.
 * This is used e.g. for page wide containers
 * in GitLab.
 */
// stylelint-disable length-zero-no-unit
$gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
$gl-alert-top-border-size: 2px;

@mixin gl-alert-variant(
  $variant,
  $background-color,
  $title-color,
  $border-top-color,
  $border-bottom-color,
  $icon-color
) {
  .gl-alert-#{$variant} {
    background-color: $background-color;
    border-bottom: 1px solid $border-bottom-color;

    &::before {
      background: linear-gradient(
        to right,
        transparent 0%,
        $border-top-color 50%,
        transparent 100%
      );
    }

    .gl-alert-title {
      color: $title-color;
    }

    @media (forced-colors: none) {
      .gl-alert-icon {
        color: $icon-color;
      }
    }
  }
}

.gl-alert {
  @apply gl-py-5;
  @apply gl-text-base;
  border-radius: var(--gl-alert-border-radius);
  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
  position: relative;

  @media (forced-colors: active) {
    border: 1px solid transparent;
  }

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: $gl-alert-top-border-size;
    position: absolute;
    top: -1px; // To accumilate for the border width
    left: 0;
  }

  &-not-dismissible {
    padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
  }

  .gl-link:not(.gl-label-link) {
    @apply gl-underline;
  }
}

.gl-alert-sticky {
  position: sticky;
  top: 0;
}

.gl-alert-title {
  @apply gl-heading-scale-400 -gl-mt-1 gl-mb-2;
}

.gl-alert-icon-container {
  position: absolute;
  top: $gl-spacing-scale-5;
  left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
  @apply gl-flex;
  @apply gl-items-center;
  height: $gl-line-height-20;

  .gl-alert-has-title & {
    top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
  }
}

.gl-alert-body {
  @apply gl-leading-20;
  @apply gl-text-default;
}

.gl-alert-actions {
  @apply gl-flex gl-flex-col gl-flex-wrap gl-gap-y-3;
  @apply gl-mt-3;
  @include gl-container-width-up(sm) {
    @apply gl-flex-row;
  }
}

.gl-alert-action {
  @apply gl-mr-0 gl-w-full;
  @apply gl-text-base;
  @apply gl-leading-normal;
  @include gl-container-width-up(sm) {
    @apply gl-mr-3 gl-w-auto;
  }
}

// This is the replacement for .gl-alert-dismiss
.gl-dismiss-btn {
  position: absolute;
  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
  right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});

  .gl-alert-has-title & {
    top: $gl-spacing-scale-4;
  }
}

/* Variants */

@include gl-alert-variant(
  $variant: danger,
  $background-color: var(--gl-alert-danger-background-color),
  $title-color: var(--gl-alert-danger-title-color),
  $border-top-color: var(--gl-alert-danger-border-top-color),
  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
  $icon-color: var(--gl-feedback-danger-icon-color)
);

@include gl-alert-variant(
  $variant: warning,
  $background-color: var(--gl-alert-warning-background-color),
  $title-color: var(--gl-alert-warning-title-color),
  $border-top-color: var(--gl-alert-warning-border-top-color),
  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
  $icon-color: var(--gl-feedback-warning-icon-color)
);

@include gl-alert-variant(
  $variant: tip,
  $background-color: var(--gl-alert-neutral-background-color),
  $title-color: var(--gl-alert-neutral-title-color),
  $border-top-color: var(--gl-alert-neutral-border-top-color),
  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
  $icon-color: var(--gl-feedback-neutral-icon-color)
);

@include gl-alert-variant(
  $variant: info,
  $background-color: var(--gl-alert-info-background-color),
  $title-color: var(--gl-alert-info-title-color),
  $border-top-color: var(--gl-alert-info-border-top-color),
  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
  $icon-color: var(--gl-feedback-info-icon-color)
);

@include gl-alert-variant(
  $variant: success,
  $background-color: var(--gl-alert-success-background-color),
  $title-color: var(--gl-alert-success-title-color),
  $border-top-color: var(--gl-alert-success-border-top-color),
  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
  $icon-color: var(--gl-feedback-success-icon-color)
);