@import "mixins/mixins";
@import "common/var";

@include b(message) {
  min-width: 278px;
  box-sizing: border-box;
  border-radius: $--border-radius-base;
  box-shadow: $--notice-box-shadow;
  border: 1px solid $--color-white;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: $--color-white;
  transition: opacity 0.3s, transform .4s, top 0.4s;
  overflow: hidden;
  padding: $--message-padding;
  display: flex;

  @include when(center) {
    justify-content: center;
  }

  @include when(closable) {
    .xb-message__content {
      padding-right: 20px;
    }
  }

  p {
    margin: 0;
  }

  .xb-message__content {
    color: $--color-black-65;
    line-height: 22px;
  }

  @include e(icon) {
    margin-right: 8px;
    line-height: 22px;
    font-size: $--iconfont-size-18;
  }

  @include e(content) {
    padding: 0;
    font-size: 14px;
    line-height: 1;
    &:focus {
      outline-width: 0;
    }
  }

  @include e(closeBtn) {
    position: absolute;
    right: 5px;
    cursor: pointer;
    color: $--color-black-45;
    font-size: $--font-size-small;
    padding: 5px;

    &:focus {
      outline-width: 0;
    }
    &:hover {
      color: $--color-black-65;
    }
  }

  & .xb_icon_correct_facet {
    @include success-font-color;
  }

  & .xb_icon_close_facet {
    @include danger-font-color;
  }

  & .xb_icon_remind_ordinary{
    @include alert-info-icon-color;
  }

  & .xb_icon_remind_caution {
    @include warning-font-color;
  }

  &.xb-message--fail .xb_icon_remind_caution {
    @include danger-font-color;
  }

  @include when(plain) {
    &.xb-message--info{
      @include message-info-border-color;
      @include alert-info-bg-color;
    }
  
    &.xb-message--success{
      border-color:$--alert-light-success-border-color;
      background-color: $--alert-light-success-bg-color;
    }
  
    &.xb-message--warning{
      border-color: $--alert-light-warning-border-color;
      background-color: $--alert-light-warning-bg-color;
    }
  
    &.xb-message--error{
      border-color: $--alert-light-error-border-color;
      background-color: $--alert-light-error-bg-color;
    }

    &.xb-message--fail{
      border-color: $--alert-light-error-border-color;
      background-color: $--alert-light-error-bg-color;
    }
  }
}

.xb-message-fade-enter,
.xb-message-fade-leave-active {
  opacity: 0;
  transform: translate(-50%, -100%);
}