@import './theme/index.less';
@import './mixins/config.less';

@message-box-prefix-name: ~'@{namespace}-message-box';
@message-box-wrapper: ~'@{message-box-prefix-name}@{element-separator}wrapper';
@message-box-header: ~'@{message-box-prefix-name}@{element-separator}header';
@message-box-title: ~'@{message-box-prefix-name}@{element-separator}title';
@message-box-headerbtn: ~'@{message-box-prefix-name}@{element-separator}headerbtn';
@message-box-content: ~'@{message-box-prefix-name}@{element-separator}content';
@message-box-container: ~'@{message-box-prefix-name}@{element-separator}container';
@message-box-input: ~'@{message-box-prefix-name}@{element-separator}input';
@message-box-status: ~'@{message-box-prefix-name}@{element-separator}status';
@message-box-message: ~'@{message-box-prefix-name}@{element-separator}message';
@message-box-errormsg: ~'@{message-box-prefix-name}@{element-separator}errormsg';
@message-box-btns: ~'@{message-box-prefix-name}@{element-separator}btns';
@message-box-btns-reverse: ~'@{message-box-prefix-name}@{element-separator}btns-reverse';
@message-box-center: ~'@{message-box-prefix-name}@{modifier-separator}center';

.@{message-box-prefix-name} {
  display: inline-block;
  width: @msgbox-width;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: @white;
  border-radius: @msgbox-border-radius;
  border: 1px solid @border-color-lighter;
  font-size: @messagebox-font-size;
  box-shadow: @box-shadow-light;
  text-align: left;
  overflow: hidden;
  backface-visibility: hidden;
}
.@{message-box-wrapper} {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
}

.@{message-box-header} {
  position: relative;
  padding: @msgbox-padding-primary;
  padding-bottom: 10px;
}

.@{message-box-title} {
  padding-left: 0;
  margin-bottom: 0;
  font-size: @messagebox-font-size;
  line-height: 1;
  color: @messagebox-title-color;
}

.@{message-box-title} {
  position: absolute;
  top: @msgbox-padding-primary;
  right: @msgbox-padding-primary;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: @font-size-lg-0;
  cursor: pointer;

  .onestop-message-box__close {
    color: @color-info;
  }

  &:focus, &:hover {
    .onestop-message-box__close {
      color: @color-primary;
    }
  }
}

.@{message-box-content} {
  padding: 10px @msgbox-padding-primary;
  color: @color-text-regular;
  font-size: @font-size-base;
}

.@{message-box-container} {
  position: relative;
}

.@{message-box-input} {
  padding-top: 15px;

  & input.invalid {
    border-color: @red-2;
    &:focus {
      border-color: @red-2;
    }
  }
}

.@{message-box-status} {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px !important;

  &::before {
    // 防止图标切割
    padding-left: 1px;
  }

  + .onestop-message-box__message {
    padding-left: 36px;
    padding-right: 12px;
  }

  &.onestop-icon-success {
    color: @green-1;
  }

  &.onestop-icon-info {
    color: @color-info;
  }

  &.onestop-icon-warning {
    color: @sub-color-3;
  }

  &.onestop-icon-error {
    color: @red-0;
  }
}

.@{message-box-message} {
  margin: 0;

  & p {
    margin: 0;
    line-height: 24px;
  }
}

.@{message-box-errormsg} {
  color: @red-2;
  font-size: @font-size-sm;
  min-height: 18px;
  margin-top: 2px;
}

.@{message-box-btns} {
  padding: 5px 15px 0;
  text-align: right;

  & button:nth-child(2) {
    margin-left: 10px;
  }
}
  
.@{message-box-btns-reverse} {
  flex-direction: row-reverse;
}

.@{message-box-center} {
  padding-bottom: 30px;

  .@{message-box-header} {
    padding-top: 30px;
  }

  .@{message-box-title} {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .@{message-box-status} {
    position: relative;
    top: auto;
    padding-right: 5px;
    text-align: center;
    transform: translateY(-1px);
  }

  .@{message-box-message} {
    margin-left: 0;
  }

  .@{message-box-btns}, .@{message-box-content} {
    text-align: center;
  }

  .@{message-box-content} {
    @padding-horizontal: @msgbox-padding-primary + 12px;
    padding-left: @padding-horizontal;
    padding-right: @padding-horizontal;
  }
}

.msgbox-fade-enter-active {
  animation: msgbox-fade-in .3s;
}

.msgbox-fade-leave-active {
  animation: msgbox-fade-out .3s;
}

@keyframes msgbox-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes msgbox-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}