/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-alert-header() {
  padding: el-theme(alert-padding);
  border-bottom: 1px solid el-theme(alert-separator);
  border-top-left-radius: el-theme(alert-border-radius);
  border-top-right-radius: el-theme(alert-border-radius);
  color: el-theme(alert-fg-heading);

  @include el-headings();
}

@mixin el-alert-theme() {
  el-alert {
    background-color: el-theme(alert-background-color);
    border-radius: el-theme(alert-border-radius);
    box-shadow: el-theme(alert-shadow);
    color: el-theme(alert-text-color);
    font-family: el-theme(alert-text-font-family);
    font-size: el-theme(alert-text-font-size);
    font-weight: el-theme(alert-text-font-weight);
    line-height: el-theme(alert-text-line-height);
    padding: el-theme(alert-padding);

    // TODO: move alert margin style to layout
    margin-bottom: el-theme(alert-bottom-margin);

    @include el-scrollbars(
        el-theme(alert-scrollbar-color),
        el-theme(alert-scrollbar-background-color),
        el-theme(alert-scrollbar-width));

    &.closable {
      @include el-ltr(padding-right, el-theme(alert-closable-start-padding));
      @include el-rtl(padding-left, el-theme(alert-closable-start-padding));
    }

    .close {
      padding: el-theme(alert-padding);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      font-family: monospace;
    }
  }

  @each $size in el-get-sizes() {
    el-alert.size-#{$size} {
      height: el-theme(alert-#{$size}-height);
    }
  }

  @each $status in el-get-statuses() {
    el-alert {
      &.status-#{$status} {
        color: el-theme(alert-#{$status}-text-color);
        background-color: el-theme(alert-#{$status}-background-color);

        a,
        a:hover {
          color: el-theme(alert-#{$status}-text-color);
        }
      }

      &.accent-#{$status} {
        border-top: el-theme(alert-border-radius) solid el-theme(alert-accent-#{$status}-color);
      }

      &.outline-#{$status} {
        border: el-theme(alert-outline-width) solid el-theme(alert-outline-#{$status}-color);
      }
    }
  }
}