@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';

:host {
  display: block;

  ::ng-deep .devui-alert-carousel-container .devui-alert-carousel-box > d-alert-carousel-item {
    min-height: var(--devui-alert-carousel-item-height, 24px);
  }
}

.devui-alert {
  color: $devui-text;
  font-size: $devui-font-size;
  border: 1px solid transparent;
  padding: 8px 16px;
  line-height: 24px;
  border-radius: $devui-border-radius;
  word-break: normal;
  word-wrap: break-word;
  display: flex;
  flex-wrap: nowrap;

  &.devui-alert-success {
    background-color: $devui-success-bg;
    border-color: $devui-success-line;
    color: $devui-text;

    .devui-close {
      & > svg path {
        fill: $devui-success-line;
      }
    }
  }

  &.devui-alert-info {
    background-color: $devui-info-bg;
    border-color: $devui-info-line;
    color: $devui-text;

    .devui-close {
      & > svg path {
        fill: $devui-info-line;
      }
    }
  }

  &.devui-alert-warning {
    background-color: $devui-warning-bg;
    border-color: $devui-warning-line;
    color: $devui-text;

    .devui-close {
      & > svg path {
        fill: $devui-warning-line;
      }
    }
  }

  &.devui-alert-danger {
    background-color: $devui-danger-bg;
    border-color: $devui-danger-line;
    color: $devui-text;

    .devui-close {
      & > svg path {
        fill: $devui-danger-line;
      }
    }
  }

  &.devui-alert-simple {
    border-color: $devui-line;
    color: $devui-text;

    .devui-close {
      & > svg path {
        fill: $devui-text-weak;
      }
    }
  }

  .devui-alert-icon {
    padding-right: 8px;
  }

  svg.devui-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    transform: translateY(-1px); //字体14px图标16px对齐问题，微调
  }

  .devui-icon.devui-icon-success {
    & > g {
      path {
        fill: $devui-success-line;
      }

      polygon {
        fill: $devui-light-text;
        stroke: $devui-light-text;
      }
    }
  }

  .devui-icon.devui-icon-warning {
    & > g {
      path.devui-icon-warning-outer {
        fill: $devui-warning-line;
      }

      path.devui-icon-warning-inner {
        fill: $devui-light-text;
        stroke: $devui-light-text;
      }
    }
  }

  .devui-icon.devui-icon-info {
    & > g {
      path.devui-icon-info-outer {
        fill: $devui-info-line;
      }

      path.devui-icon-info-inner {
        fill: $devui-light-text;
        stroke: $devui-light-text;
      }
    }
  }

  .devui-icon.devui-icon-error {
    & > g {
      path.devui-icon-error-outer {
        fill: $devui-danger-line;
      }

      path.devui-icon-error-inner {
        fill: $devui-light-text;
        stroke: $devui-light-text;
      }
    }
  }

  .devui-alert-carousel-container {
    flex: 1;
    min-height: 24px;
    overflow: hidden;

    .devui-alert-carousel-box {
      position: relative;
      left: 0;
      top: 0;
    }
  }

  .devui-alert-operation-container {
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 24px;
    width: fit-content;

    &:empty {
      display: none;
    }

    .devui-alert-carousel-num {
      padding-right: 8px;
    }

    .devui-alert-carousel-button {
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 16px;
      line-height: 16px;
      vertical-align: middle;
      background-color: transparent;
      text-align: center;
      border-radius: $devui-border-radius;
      cursor: pointer;

      svg path {
        fill: $devui-text;
      }

      &:hover {
        background-color: $devui-shape-icon-fill-hover;

        svg path {
          fill: $devui-light-text;
        }
      }
    }
  }

  .devui-close {
    flex-grow: 0;
    flex-shrink: 1;
    color: $devui-text;
    opacity: 1;
    line-height: 26px;
    height: 24px;
    padding-left: 8px;

    & > svg path {
      fill: $devui-light-text;
    }

    span {
      color: $devui-text;
      font-size: $devui-font-size;
      font-weight: bold;
    }
  }
}
