@import './../theme/vars.scss';
@import './../mixins/reset.scss';

$msgPrefixCls: #{$vender-prefix}-message;

.#{$msgPrefixCls} {
  @include reset-component2;

  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 9999;
  max-width: 400px;
  min-width: 200px;
  padding: $message-padding;
  font-size: 14px;
  word-wrap: break-word;
  background-color: white;
  border: 1px solid transparent;
  border-radius: $border-radius-base;
  opacity: 0;
  transform: translate(-50%, -25%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s, transform 0.15s;
}

.#{$msgPrefixCls}-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.#{$msgPrefixCls}-symbol {
  // position: absolute;
  // left: 30px;
  // top: 50%;
  // font-size: 30px;
  margin-right: 0.5em;
  transform: translateY(-50%);
}

.#{$msgPrefixCls}-emove {
  position: absolute;
  top: -1em;
  right: -1em;
  width: 1.5em;
  height: 1.5em;
  color: white;
  background: black;
  border-radius: 1.5em;
}

.#{$msgPrefixCls}-success {
  border-top: 4px solid $success-color;

  .#{$msgPrefixCls}-symbol {
    color: $success-color;
  }
}

.#{$msgPrefixCls}-danger {
  border-top: 4px solid $danger-color;

  .#{$msgPrefixCls}-symbol {
    color: $danger-color;
  }
}

.#{$msgPrefixCls}-info {
  border-top: 4px solid $info-color;

  .#{$msgPrefixCls}-symbol {
    color: $info-color;
  }
}

.#{$msgPrefixCls}-custom {
  border-top: 4px solid $custom-color;

  .#{$msgPrefixCls}-symbol {
    color: $custom-color;
  }
}

// flash notice
$flashNoticePrefixCls: #{$vender-prefix}-flash-notice;

.#{$flashNoticePrefixCls} {
  position: absolute;
  top: 0;
  z-index: 1;
  font-size: 14px;
  cursor: pointer;
  border-left: 5px solid #f9a688;

  &-bg {
    padding: 0.75em 1.25em;
    color: white;
    background-color: var(--primary-color);
  }

  &-content {
    width: 100%;
    max-width: 1280px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background: transparent;
  }
}