@use "functions";
@use "mixins/alert";
@use "mixins/border-radius";
@use "variables";

.alert {
  position: relative;
  padding: variables.$alert-padding-y variables.$alert-padding-x;
  margin-bottom: variables.$alert-margin-bottom;
  border: variables.$alert-border-width solid transparent;
  @include border-radius.border-radius(variables.$alert-border-radius);
}

// Headings for larger alerts
.alert-heading {
  // Specified to prevent conflicts of changing $headings-color
  color: inherit;
}

// Provide class for links that match alerts
.alert-link {
  font-weight: variables.$alert-link-font-weight;
}


// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

.alert-dismissible {
  padding-right: variables.$close-font-size + variables.$alert-padding-x * 2;

  // Adjust close link position
  .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: variables.$alert-padding-y variables.$alert-padding-x;
    color: inherit;
  }
}


// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

@each $color, $value in variables.$theme-colors {
  .alert-#{$color} {
    @include alert.alert-variant(
      functions.theme-color-level-new(
        variables.$theme-colors,
        variables.$black,
        variables.$white,
        variables.$theme-color-interval,
        $color, variables.$alert-bg-level),
      functions.theme-color-level-new(
        variables.$theme-colors,
        variables.$black,
        variables.$white,
        variables.$theme-color-interval,
        $color, variables.$alert-border-level),
      functions.theme-color-level-new(
        variables.$theme-colors,
        variables.$black,
        variables.$white,
        variables.$theme-color-interval,
        $color, variables.$alert-color-level)
    );
  }
}

.es-form-msg {
  .icon-wrapper {
    align-items: center;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    position: relative;
    width: 2.5rem;
    z-index: 1;

    &::before {
      content: '';
      height: 2rem;
      position: absolute;
      border-radius: 50%;
      width: 2rem;
    }

    svg {
      position: relative;
      z-index: 2;
    }
  }

  .close,
  .close:not(:disabled):not(.disabled):hover,
  .close:not(:disabled):not(.disabled):focus {
    opacity: 1;
  }

  &.alert-danger {
    .icon-wrapper {
      color: variables.$error-900;

      &::before {
        box-shadow: 0 0 0 4px variables.$error-50,
          0 0 0 6px variables.$error-500 inset;
      }
    }
  }

  &.alert-success {
    .icon-wrapper {
      color: variables.$success-900;

      &::before {
        box-shadow: 0 0 0 4px variables.$success-50,
          0 0 0 6px variables.$success-500 inset;
      }
    }
  }

  &.alert-primary {
    .icon-wrapper {
      color: variables.$blue-600;

      &::before {
        box-shadow: 0 0 0 4px variables.$blue-50,
          0 0 0 6px variables.$blue-200 inset;
      }
    }
  }
}