@import 'themes/default';
@import 'themes/bandit';

// === BASICS === //

.ModernButton {
  $self: &;
  @include generate-button-color-variables();

  --focus--offset: var(--focus--width);

  // Shared, non color/variant styles
  appearance: none;
  border: none;
  border-radius: var(--ModernButton____radius);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--ModernButton____font-weight);
  line-height: var(--ModernButton____line-height);
  padding: var(--ModernButton____padding);
  position: relative;
  text-align: center;
  transition-duration: var(--ModernButton____transition-duration);
  transition-property: background, box-shadow, color, fill, opacity, filter;

  > span {
    font-size: var(--ModernButton____font-size);
  }

  &:active {
    transition-duration: var(--timing--click);
  }

  &[disabled] {
    // This is critical for anchor link buttons to prevent click events
    pointer-events: none;
  }

  &--icon-only {
    padding: var(--ModernButton--icon-only____padding);
    --ModernButton--small____padding: var(
      --ModernButton--small-icon-only____padding
    );
  }

  // Small button size
  &--small {
    padding: var(--ModernButton--small____padding);
    --ModernButton____font-size: var(--font-size--s);
  }

  // Filled button variant
  &--filled {
    background: var(--ModernButton--filled____bg-color);
    color: var(--ModernButton--filled____color);

    &:hover,
    &:focus-visible {
      background: var(--ModernButton--filled--hover____bg-color);
      color: var(--ModernButton--filled--hover____color);
    }

    &#{$self}--forced-active,
    &:active {
      background: var(--ModernButton--filled--active____bg-color);
      color: var(--ModernButton--filled--active____color);
    }

    &[disabled] {
      background: var(--ModernButton--filled--disabled____bg-color);
      color: var(--ModernButton--filled--disabled____color);
    }
  }

  // Ghost button variant
  &--ghost {
    background: var(--ModernButton--ghost____bg-color);
    color: var(--ModernButton--ghost____color);

    &:hover,
    &:focus-visible {
      background: var(--ModernButton--ghost--hover____bg-color);
      color: var(--ModernButton--ghost--hover____color);
    }

    &#{$self}--forced-active,
    &:active {
      background: var(--ModernButton--ghost--active____bg-color);
      color: var(--ModernButton--ghost--active____color);
    }

    &[disabled] {
      background: var(--ModernButton--ghost--disabled____bg-color);
      color: var(--ModernButton--ghost--disabled____color);
    }
  }

  // Outline button variant
  &--outlined {
    background: none;
    box-shadow: inset 0 0 0 var(--ModernButton--outlined____border-width)
      var(--ModernButton--outlined____b-color);
    color: var(--ModernButton--outlined____color);
    background-color: var(--ModernButton--outlined____bg-color);

    &:hover,
    &:focus-visible {
      background: none;
      box-shadow: inset 0 0 0 var(--ModernButton--outlined____border-width)
        var(--ModernButton--outlined--hover____b-color);
      color: var(--ModernButton--outlined--hover____color);
      background-color: var(--ModernButton--outlined--hover____bg-color);
    }

    &#{$self}--forced-active,
    &:active {
      background: none;
      box-shadow: inset 0 0 0 var(--ModernButton--outlined____border-width)
        var(--ModernButton--outlined--active____b-color);
      color: var(--ModernButton--outlined--active____color);
      background-color: var(--ModernButton--outlined--active____bg-color);
    }

    &[disabled] {
      background: none;
      color: var(--ModernButton--outlined--disabled____color);
      box-shadow: inset 0 0 0 var(--ModernButton--outlined____border-width)
        var(--ModernButton--outlined--disabled____b-color);
      background-color: var(--ModernButton--outlined--disabled____bg-color);
    }
  }

  // Badge styles.
  // We're using a sibling selector here to override the specificity for the sibling selector above.
  > span {
    &#{$self}--badge {
      align-items: center;
      border-radius: 8px;
      display: flex;
      font-size: var(--font-size--xs);
      font-weight: var(--font-weight--semibold);
      height: 16px;
      justify-content: center;
      line-height: 1;
      min-width: 16px;
      padding: 0 4px;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);

      &--pill {
          padding: 0 6px;
      }
    }

  }
}

// === COLORS === //

.ModernButton--default {
  @include generate-button-color-variables();
}

.ModernButton--primary {
  @include generate-button-color-variables(
    (
      'ModernButton--filled____bg-color': var(--color--blue-500),
      'ModernButton--filled--hover____bg-color': var(--color--blue-600),
      'ModernButton--filled--active____bg-color': var(--color--blue-700),
      'ModernButton--filled____color': var(--color--white),
      'ModernButton--ghost--hover____bg-color': var(--color--blue-50),
      'ModernButton--ghost--active____bg-color': var(--color--blue-100),
      'ModernButton--ghost____color': var(--color--blue-500),
      'ModernButton--ghost--hover____color': var(--color--blue-600),
      'ModernButton--ghost--active____color': var(--color--blue-700),
      'ModernButton--outlined____b-color': var(--color--blue-300),
      'ModernButton--outlined--hover____b-color': var(--color--blue-500),
      'ModernButton--outlined--active____b-color': var(--color--blue-700),
      'ModernButton--outlined____color': var(--color--blue-500),
      'ModernButton--outlined--hover____color': var(--color--blue-600),
      'ModernButton--outlined--active____color': var(--color--blue-700)
    )
  );
}

.ModernButton--critical {
  @include generate-button-color-variables(
    (
      'ModernButton--filled____bg-color': var(--color--red-500),
      'ModernButton--filled--hover____bg-color': var(--color--red-600),
      'ModernButton--filled--active____bg-color': var(--color--red-700),
      'ModernButton--filled____color': var(--color--white),
      'ModernButton--ghost--hover____bg-color': var(--color--red-50),
      'ModernButton--ghost--active____bg-color': var(--color--red-100),
      'ModernButton--ghost____color': var(--color--red-500),
      'ModernButton--ghost--hover____color': var(--color--red-600),
      'ModernButton--ghost--active____color': var(--color--red-700),
      'ModernButton--outlined____b-color': var(--color--red-300),
      'ModernButton--outlined--hover____b-color': var(--color--red-500),
      'ModernButton--outlined--active____b-color': var(--color--red-700),
      'ModernButton--outlined____color': var(--color--red-500),
      'ModernButton--outlined--hover____color': var(--color--red-600),
      'ModernButton--outlined--active____color': var(--color--red-700)
    )
  );
}

// === THEMES === //
// NOTE: Only `onDark` is customized, as `onLight` is the default theme.
.ModernButton--onDark {
  // Default and primary share styling in the `onDark` theme
  &.ModernButton--default,
  &.ModernButton--primary {
    @include generate-button-color-variables(
      (
        'ModernButton--filled____bg-color': var(--color--white),
        'ModernButton--filled--hover____bg-color': var(--color--gray-25),
        'ModernButton--filled--active____bg-color': var(--color--gray-100),
        'ModernButton--filled____color': var(--color--gray-800),
        'ModernButton--filled--disabled____bg-color': rgba(255, 255, 255, 0.12),
        'ModernButton--filled--disabled____color': rgba(255, 255, 255, 0.32),
        'ModernButton--ghost--hover____bg-color': rgba(255, 255, 255, 0.08),
        'ModernButton--ghost--active____bg-color': rgba(255, 255, 255, 0.12),
        'ModernButton--ghost____color': var(--color--white),
        'ModernButton--ghost--hover____color': var(--color--white),
        'ModernButton--ghost--active____color': var(--color--white),
        'ModernButton--ghost--disabled____bg-color': transparent,
        'ModernButton--ghost--disabled____color': rgba(255, 255, 255, 0.32),
        'ModernButton--outlined____b-color': rgba(255, 255, 255, 0.5),
        'ModernButton--outlined--hover____b-color': rgba(255, 255, 255, 0.8),
        'ModernButton--outlined--active____b-color': var(--color--white),
        'ModernButton--outlined____color': var(--color--white),
        'ModernButton--outlined--hover____color': var(--color--white),
        'ModernButton--outlined--active____color': var(--color--white),
        'ModernButton--outlined____bg-color': transparent,
        'ModernButton--outlined--hover____bg-color': rgba(255, 255, 255, 0.04),
        'ModernButton--outlined--active____bg-color': rgba(255, 255, 255, 0.08),
        'ModernButton--outlined--disabled____bg-color': transparent
      )
    );
  }

  &.ModernButton--critical {
    @include generate-button-color-variables(
      (
        'ModernButton--filled____bg-color': var(--color--red-500),
        'ModernButton--filled--hover____bg-color': #e8325d,
        'ModernButton--filled--active____bg-color': var(--color--red-600),
        'ModernButton--filled____color': var(--color--white),
        'ModernButton--filled--disabled____bg-color': rgba(255, 255, 255, 0.12),
        'ModernButton--filled--disabled____color': rgba(255, 255, 255, 0.32),
        'ModernButton--ghost--hover____bg-color': rgba(229, 21, 70, 0.12),
        'ModernButton--ghost--active____bg-color': rgba(229, 21, 70, 0.16),
        'ModernButton--ghost____color': var(--color--red-500),
        'ModernButton--ghost--hover____color': var(--color--red-500),
        'ModernButton--ghost--active____color': var(--color--red-500),
        'ModernButton--ghost--disabled____bg-color': transparent,
        'ModernButton--ghost--disabled____color': rgba(255, 255, 255, 0.32),
        'ModernButton--outlined____b-color': rgba(229, 21, 70, 0.7),
        'ModernButton--outlined--hover____b-color': rgba(229, 21, 70, 0.9),
        'ModernButton--outlined--active____b-color': var(--color--red-500),
        'ModernButton--outlined____color': var(--color--red-500),
        'ModernButton--outlined--hover____color': var(--color--red-500),
        'ModernButton--outlined--active____color': var(--color--red-500),
        'ModernButton--outlined____bg-color': transparent,
        'ModernButton--outlined--hover____bg-color': rgba(229, 21, 70, 0.1),
        'ModernButton--outlined--active____bg-color': rgba(229, 21, 70, 0.14),
        'ModernButton--outlined--disabled____bg-color': transparent
      )
    );
  }
}