.gl-alert {
  @include gl-font-base;
  @include gl-relative;
  @include gl-px-9;
  @include gl-py-5;

  &-not-dismissible {
    @include gl-pr-5;
  }

  .gl-link:not(.gl-label-link) {
    @include gl-text-blue-600;
    @include gl-text-decoration-underline;

    &:hover {
      @include gl-text-blue-700;
    }
  }
}

.gl-alert-sticky {
  @include gl-sticky;
  @include gl-top-0;
}

.gl-alert-title {
  @include gl-font-base;
  @include gl-font-weight-bold;
  @include gl-line-height-normal;
  @include gl-mt-0;
  @include gl-mb-3;
}

.gl-alert-icon {
  @include gl-absolute;
  @include gl-top-5;
  @include gl-left-5;
  @include gl-w-5;
  @include gl-h-5;
  @include gl-fill-current-color;
}

.gl-alert-icon-no-title {
  @include gl-mt-1;
}

.gl-alert-body {
  @include gl-line-height-20;
}

.gl-alert-actions {
  @include gl-display-flex;
  @include gl-mt-5;
}

.gl-alert-action {
  @include gl-mr-3;
  @include gl-font-base;
  @include gl-line-height-normal;
}

// Todo: deprecate the .gl-alert-dismiss styles after all instances from HAML and Ruby have been migrated
.gl-alert-dismiss {
  @include gl-absolute;
  @include gl-top-0;
  @include gl-right-0;
  @include gl-p-5;
  @include gl-line-height-normal;
  @include gl-bg-none;
  @include gl-border-none;
  @include gl-text-gray-500;

  > svg {
    @include gl-fill-current-color;
    @include gl-w-5;
    @include gl-h-5;
    @include gl-vertical-align-middle;
  }
}

// This is the replacement for .gl-alert-dismiss
.gl-dismiss-btn {
  @include gl-absolute;
  @include gl-top-4;
  @include gl-right-4;
}

.gl-alert-max-content {
  @include gl-display-flex;
  @include gl-justify-content-center;
  @include gl-p-5;

  .gl-alert-icon {
    @include gl-static;
    @include gl-mr-5;
    @include gl-flex-shrink-0;
  }

  .gl-dismiss-btn {
    @include gl-static;
    @include gl-align-self-start;
    @include gl-ml-4;
    // The negative margins optically align the × with the title text and right padding
    margin-top: -$gl-spacing-scale-2;
    margin-right: -$gl-spacing-scale-2;
    order: 3;
  }

  .gl-alert-container {
    @include gl-relative;
    @include gl-display-flex;
    @include gl-justify-content-space-between;
    @include gl-flex-grow-1;
    @include gl-mx-auto;
  }

  .gl-alert-content {
    @include gl-flex-grow-1;
  }
}

.gl-alert-layout-limited .gl-alert-container {
  @include gl-layout-w-limited;
}

.gl-alert-danger {
  @include gl-bg-red-50;

  .gl-alert-icon {
    @include gl-text-red-600;
  }
}

.gl-alert-warning {
  @include gl-bg-orange-50;

  .gl-alert-icon {
    @include gl-text-orange-600;
  }
}

.gl-alert-tip {
  @include gl-bg-gray-50;

  .gl-alert-icon {
    @include gl-text-gray-600;
  }
}

.gl-alert-info {
  @include gl-bg-blue-50;

  .gl-alert-icon {
    @include gl-text-blue-600;
  }
}

.gl-alert-success {
  @include gl-bg-green-50;

  .gl-alert-icon {
    @include gl-text-green-600;
  }
}