sparkletown/sparkle

@import "scss/constants.scss";

// order of elements:
// $modifier  - will be used as ButtonNG--modifier
// $color     - the same foreground color with :hover and without
// $normal-bg - the normal background color
// $hover-bg  - the background color when button is :hover-ed
$variants-enum: (
  ("primary", var(--content--over), var(--accent--under), $primary--live-hover),
  (
    "secondary",
    var(--content--over),
    var(--content--over-20a),
    var(--content--over-30a)
  ),
  ("white", var(--accent--under), var(--content--over), var(--content--over)),
  (
    "dark",
    var(--content--over),
    var(--content--under-40a),
    var(--content--under-60a)
  ),
  (
    "login-primary",
    var(--content--over),
    var(--accent--under),
    var(--primary--under-darker-10pp)
  ),
  (
    "login-outline",
    var(--content--over),
    transparent,
    var(--primary--under-darker-10pp)
  ),
  (
    "danger",
    var(--danger--over),
    var(--danger--under),
    var(--danger--under-lighter-10pp)
  )
);

@function calc-size-by-factor($factor) {
  @return calc(#{$factor} * 1em + 2 * #{$spacing--xs});
}

.ButtonNG {
  display: inline-block;

  padding: $spacing--md;
  margin: $spacing--xs;
  width: $button-width--normal;
  max-width: $button-width--max;

  border-radius: $border-radius--xl;
  border: none;
  background-image: none;

  font-style: normal;
  font-weight: $font-weight--500;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.5;

  transform: translateY(0);
  transition: transform 0.4s $transition-function;

  color: var(--content--over);
  text-shadow: $text-shadow--thin;
  background-color: var(--content--over-20a);
  backdrop-filter: blur(10px);
  box-shadow: box-shadow--medium(var(--content--under-25a));

  &:hover {
    color: currentColor;
    background-color: var(--content--over-25a);
    text-decoration: none;
  }

  &:focus,
  &:focus:hover {
    outline: none;
    box-shadow: box-shadow--input(var(--content--over-80a));
  }

  &:enabled:hover,
  &--enabled:hover {
    transform: translateY(-1px);
  }

  &--disabled,
  &--disabled:hover,
  &:disabled,
  &:disabled:hover {
    color: var(--content--over-40a);
    background: var(--content--over-10a);
    backdrop-filter: blur(10px);
    box-shadow: box-shadow--small(var(--content--under-25a));
    cursor: default;
  }

  &--icon-only {
    padding: $spacing--xs;
  }

  &__icon--icon-text {
    margin-right: 1em;
  }

  &__icon--loading {
    filter: $drop-shadow--outline;
  }

  &--1x {
    @include square-size(calc-size-by-factor(2.5));
  }

  &--2x {
    @include square-size(calc-size-by-factor(3));
  }

  &--3x {
    @include square-size(calc-size-by-factor(4));
  }

  @each $modifier, $color, $normal-bg, $hover-bg in $variants-enum {
    &--#{$modifier} {
      color: $color;
      background-color: $normal-bg;

      &:hover {
        color: $color;
        background-color: $hover-bg;
      }
    }
  }

  &--admin-gradient:enabled {
    background-image: $admin-gradient;
  }

  &--danger-gradient:enabled {
    background-image: $danger-gradient;
  }

  &--normal-gradient:enabled {
    background-image: $gradient;
  }

  &--login-gradient:enabled {
    background-image: $login-rainbox-gradient;
  }

  &--login-outline {
    box-shadow: inset box-shadow--input(var(--accent--under)),
      box-shadow--medium(var(--content--over-25a));

    &:focus,
    &:hover {
      opacity: 0.8;
      background-color: var(--primary--under-darker-10pp);
    }
  }
}