.@{css-prefix}alert {
  position: relative;
  border-width: @alert-border-width;
  border-style: solid;
  line-height: @line-height-md;
  color: @text-color-1;
  font-size: @font-size-md;
  border-radius: @border-radius-base;
  padding: @alert-padding-base-vertical @alert-padding-base-horizontal;
  display: flex;
  align-items: center;
  .bui-alert-icon {
    width: @alert-prefix-icon-size;
    height: @alert-prefix-icon-size;
    position: absolute;
    top: @alert-icon-top-md;
    left: @alert-prefix-icon-size;
  }

  .bui-alert-right-close {
    cursor: pointer;
    font-size: @font-size-sm;
    color: @primary-color;
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: absolute;
    top: 8px;
    right: 16px;
    line-height: 16px;
    .bui-alert-close {
      fill: @alert-close-icon-color;
      width: @alert-close-icon-size;
      height: @alert-close-icon-size;
    }
  }
  &-info {
    .alert-color(@info-color-6; @info-color-4; @info-color);
  }
  &-success {
    .alert-color(@success-color-6; @success-color-4; @success-color);
  }
  &-warning {
    .alert-color(@warning-color-6; @warning-color-4; @warning-color);
  }
  &-danger {
    .alert-color(@danger-color-6; @danger-color-4; @danger-color);
  }
  &-sm {
    padding: @alert-padding-sm-vertical @alert-padding-sm-horizontal;
    font-size: @font-size-sm;
    line-height: @line-height-sm;
    .bui-alert-icon {
      top: @alert-icon-top-sm;
    }
    .bui-alert-right-close {
      top: 6px;
    }
  }
  &-lg {
    padding: @alert-padding-lg-vertical @alert-padding-lg-horizontal;
    .bui-alert-icon {
      top: @alert-icon-top-lg;
    }
    .bui-alert-right-close {
      top: 10px;
    }
  }
  &-closable {
    .content-wrapper {
      margin-right: @alert-closable-padding-right;
    }
  }
  &-show-icon {
    padding-left: @alert-show-icon-padding-left;
  }
  &-plain {
    padding: 0;
    background-color: transparent;
    border-color: transparent;
    .content-wrapper {
      margin-right: 0;
    }
    &.@{css-prefix}alert-show-icon {
      padding-left: @alert-show-icon-padding-left-plain;
    }
    .bui-alert-icon {
      left: 0;
      top: @alert-icon-top-md - @alert-padding-base-vertical;
    }
    &.@{css-prefix}alert {
      &-sm {
        .bui-alert-icon {
          top: @alert-icon-top-sm - @alert-padding-sm-vertical;
        }
      }
      &-lg {
        .bui-alert-icon {
          top: @alert-icon-top-lg - @alert-padding-lg-vertical;
        }
      }
    }
  }
  &.@{css-prefix}alert-banner {
    background-color: @alert-banner-bg;
    border: @alert-border-width solid @alert-border-color;
    border-radius: @border-radius-base;
    .bui-alert-icon {
      width: @alert-icon-prefix-md;
      height: 100%;
      position: absolute;
      top: -@alert-border-width;
      left: 0;
      transform: none;
      background: @primary-color-2;
      display: flex;
      align-items: center;
      justify-content: center;
      fill: @gray-1;
      box-sizing: content-box;
      padding: @alert-border-width 0;
      border-radius: @border-radius-base 0 0 @border-radius-base;
      svg {
        width: @alert-prefix-icon-size;
        height: @alert-prefix-icon-size;
        position: static;
      }
    }
    &.@{css-prefix}alert-info {
      .bui-alert-icon {
        background: @info-color-2;
      }
    }
    &.@{css-prefix}alert-danger {
      .bui-alert-icon {
        background: @danger-color-2;
      }
    }
    &.@{css-prefix}alert-success {
      .bui-alert-icon {
        background: @success-color-2;
      }
    }
    &.@{css-prefix}alert-warning {
      .bui-alert-icon {
        background: @warning-color-2;
      }
    }
    &.@{css-prefix}alert-sm {
      .bui-alert-icon {
        width: @alert-icon-prefix-sm;
      }
      &.@{css-prefix}alert-show-icon {
        padding-left: @alert-banner-show-icon-padding-left-sm;
      }
    }
    &.@{css-prefix}alert-lg {
      .bui-alert-icon {
        width: @alert-icon-prefix-lg;
      }
      &.@{css-prefix}alert-show-icon {
        padding-left: @alert-banner-show-icon-padding-left-lg;
      }
    }
    &.@{css-prefix}alert-show-icon {
      padding-left: @alert-banner-show-icon-padding-left;
    }
    .bui-alert-right-close-slot {
      margin-right: 4px;
    }
  }
}

.alert-color(@background; @border; @icon-fill) {
  background-color: @background;
  border-color: @border;
  .bui-alert-icon {
    fill: @icon-fill;
  }
}

.@{css-prefix}alert-rtl {
  direction: rtl;
  padding-left: @alert-padding-base-horizontal;
  .bui-alert-icon {
    left: auto;
    right: @alert-prefix-icon-size;
  }
  .bui-alert-right-close {
    margin-left: 0;
    margin-right: auto;
    right: auto;
    left: 16px;
  }
  &.@{css-prefix}alert-closable {
    .content-wrapper {
      margin-left: @alert-closable-padding-right;
      margin-right: 0;
    }
  }
  &.@{css-prefix}alert-show-icon {
    padding-right: @alert-show-icon-padding-left;
  }
  &.@{css-prefix}alert-plain {

    .content-wrapper {
      margin-right: 0;
      margin-left: 0;
    }
    .bui-alert-icon {
      right: 0;
    }
    &.byted-alert-show-icon {
      padding-left: 0;
      padding-right: @alert-show-icon-padding-left-plain;
    }
  }
  &.@{css-prefix}alert-banner {
    &.@{css-prefix}alert-show-icon {
      padding-left: @alert-padding-base-horizontal;
    }
    .bui-alert-icon {
      left: auto;
      right: 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    .bui-alert-right-close-slot {
      margin-right: 0;
    }
  }
}