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


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


#{getClassName((tip))} {
  transition: .2s opacity;
  font-size: #{getValName((tip, font-size))};
  background-color: #{getValName((tip, background-color))};
  border-radius: #{getValName((tip, border-radius))};
  color: #{getValName((tip, color))};
  padding: .3em .6em;
  z-index: 99;
}

#{getClassName((tip))} [data-popper-arrow],
#{getClassName((tip))} [data-popper-arrow]::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#{getClassName((tip))} [data-popper-arrow] {
  visibility: hidden;
}

#{getClassName((tip))} [data-popper-arrow]::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

#{getClassName((tip))}[data-popper-placement^='top'] > [data-popper-arrow] {
  bottom: -4px;
}

#{getClassName((tip))}[data-popper-placement^='bottom'] > [data-popper-arrow] {
  top: -4px;
}

#{getClassName((tip))}[data-popper-placement^='left'] > [data-popper-arrow] {
  right: -4px;
}

#{getClassName((tip))}[data-popper-placement^='right'] > [data-popper-arrow] {
  left: -4px;
}

#{getClassName((tip))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    tip,
    (
      color: (color, neutral, 1),
      'background-color': (color, neutral, 10),
      'border-radius': (border, radius, base),
      'font-size': (heading8),
    )
  )
}

#{getClassName((tip, large))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    tip,
    (
      'font-size': (heading7),
    )
  )
}
#{getClassName((tip, mini))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    tip,
    (
      'font-size': (heading9),
    )
  )
}

.tip-fade-enter-from, .tip-fade-leave-to {
  opacity: 0;
}