@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((message))} {
  font-size: #{getValName((message, font-size))};
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  color: #{getValName((message, color))};
  background-color: #{getValName((message, background-color))};
  padding: #{getValName((message, padding))}; // #{getValName((space, s))} #{getValName((space, base))};
  border-radius: #{getValName((border, radius, base))};
  border: solid 1px #{getValName((message, border-color))};
  box-shadow: #{getValName((message, box-shadow))};
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  line-height: 1.4em;
  transition: .3s all;

  #{getClassName((message, prefix-icon))} {
    color: #{getValName((message, icon-color))};
    font-size: 1.2em;

    +#{getClassName((message, bd))} {
      margin-left: .5em;
    }
  }

  #{getClassName((message, suffix-icon))} {
    margin-left: 1em;
    cursor: pointer;
  }

  >#{getClassName((message, bd))} {
    flex: 1;
    word-break: break-word;
  }
}

#{getClassName((message))} {
  #{joinValName((message, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  #{joinValName((message, padding))}: .6em 1em;
  @include set-css-val(message,
    (font-size: (heading8),
      color: (color, neutral, 9),
      'border-color': (color, neutral, 2),
      'background-color': (color, neutral, 0),
      'icon-color': (color, primary),
    ))
}

#{getClassName((message, large))} {
  @include set-css-val(message,
    (font-size: (heading7)))
}

#{getClassName((message, mini))} {
  @include set-css-val(message,
    (font-size: (heading9)))
}

#{getClassName((message, primary))} {
  #{joinValName((message, box-shadow))}: 0px 3px 12px rgba(map.get($colors, primary, base), 0.12);
  @include set-css-val(message,
    (color: (color, primary),
      'icon-color': (color, primary),
      'border-color': (color, primary, lighter),
      'background-color': (color, primary, lightest),
    ))
}

#{getClassName((message, success))} {
  #{joinValName((message, box-shadow))}: 0px 3px 12px rgba(map.get($colors, success, base), 0.12);
  @include set-css-val(message,
    (color: (color, success),
      'icon-color': (color, success),
      'border-color': (color, success, lighter),
      'background-color': (color, success, lightest),
    ))
}

#{getClassName((message, warning))} {
  #{joinValName((message, box-shadow))}: 0px 3px 12px rgba(map.get($colors, warning, base), 0.12);
  @include set-css-val(message,
    (color: (color, warning),
      'icon-color': (color, warning),
      'border-color': (color, warning, lighter),
      'background-color': (color, warning, lightest),
    ))
}

#{getClassName((message, danger))} {
  #{joinValName((message, box-shadow))}: 0px 3px 12px rgba(map.get($colors, danger, base), 0.12);
  @include set-css-val(message,
    (color: (color, danger),
      'icon-color': (color, danger),
      'border-color': (color, danger, lighter),
      'background-color': (color, danger, lightest),
    ))
}

#{getClassName((message, full))} {
  width: 100%;
  border-radius: 0;
}

.message-fade-enter-from,
.message-fade-leave-to {
  transform: translateX(-50%) translateY(-20px);
  opacity: 0;
}