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

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

#{getClassName((notify))} {
  position: fixed;
  color: #{getValName((notify, color))};
  background-color: #{getValName((notify, background-color))};
  padding: #{getValName((space, s))} #{getValName((space, xl))} #{getValName((space, s))} #{getValName((space, base))};
  border-radius: #{getValName((border, radius, base))};
  border: solid 1px #{getValName((notify, border-color))};
  box-shadow: #{getValName((notify, box-shadow))};
  z-index: 5000;
  display: flex;
  align-items: flex-start;
  transition: .3s all;
  &.is-top-left {
    top: #{getValName((space, base))};
    left: #{getValName((space, base))};
  }
  &.is-top-right {
    top: #{getValName((space, base))};
    right: #{getValName((space, base))};
  }
  &.is-bottom-left {
    bottom: #{getValName((space, base))};
    left: #{getValName((space, base))};
  }
  &.is-bottom-right {
    bottom: #{getValName((space, base))};
    right: #{getValName((space, base))};
  }
  #{getClassName((notify, prefix-icon))} {
    color: #{getValName((notify, icon-color))};
    font-size: 1.2em;
    + #{getClassName((notify, bd))} {
      margin-left: .5em;
    }
  }
  #{getClassName((notify, suffix-icon))} {
    margin-left: 1em;
    cursor: pointer;
  }
  > #{getClassName((notify, bd))} {
    flex: 1;
  }
}

#{getClassName((notify, icon))} {
  padding-right: .5em;
  font-size: #{getValName((heading7))};
}
#{getClassName((notify, rt-icon))} {
  position: absolute;
  top: #{getValName((space, s))};
  right: #{getValName((space, base))};
}
#{getClassName((notify, hd))} {
  font-size: #{getValName((heading7))};
}



#{getClassName((notify))} {
  #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    notify,
    (
      color: (color, neutral, 9),
      'border-color': (color, neutral, 2),
      'background-color': (color, neutral, 0),
      'icon-color': (color, primary),
    )
  )
}

#{getClassName((notify, success))} {
  @include set-css-val(
    notify,
    (
      'icon-color': (color, success)
    )
  )
}
#{getClassName((notify, warning))} {
  @include set-css-val(
    notify,
    (
      'icon-color': (color, warning)
    )
  )
}
#{getClassName((notify, danger))} {
  @include set-css-val(
    notify,
    (
      'icon-color': (color, danger)
    )
  )
}


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