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

// === BASICS === //

.Button {
  @include generate-button-color-variables();

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

  appearance: none;
  background: var(--Button____bg-color);
  border: none;
  border-radius: var(--Button____radius);
  color: var(--Button____color);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--Button____font-weight);
  line-height: var(--Button____line-height);
  padding: var(--Button____padding);
  text-align: center;
  transition-duration: var(--Button____transition-duration);
  transition-property: background, box-shadow, color, fill, opacity, top, filter;

  &[disabled] {
    filter: grayscale(1);
    opacity: 0.3;
    pointer-events: none;
  }

  &:hover,
  &:focus-visible {
    background: var(--Button--hover____bg-color);

    color: var(--Button--hover____color);
  }

  &:active {
    background: var(--Button--active____bg-color);
    color: var(--Button--active____color);
    transition-duration: var(--timing--click);
  }

  &--glass {
    background: var(--Button--glass____bg-color);
    color: var(--Button--glass____color);

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

    &:active {
      background: var(--Button--glass--active____bg-color);
      color: var(--Button--glass--active____color);
    }

    &[disabled] {
      opacity: 0.5;
    }
  }

  &--outline {
    background: none;
    box-shadow: inset 0 0 0 var(--Button--outline____border-width)
      var(--Button--outline____b-color);
    color: var(--Button--outline____color);

    &:hover,
    &:focus-visible {
      background: none;
      box-shadow: inset 0 0 0 var(--Button--outline____border-width)
        var(--Button--outline--hover____b-color);
      color: var(--Button--outline--hover____color);
    }

    &:active {
      background: none;
      box-shadow: inset 0 0 0 var(--Button--outline____border-width)
        var(--Button--outline--active____b-color);
      color: var(--Button--outline--focus____color);
    }

    &[disabled] {
      opacity: 0.3;
    }
  }
}

// === COLORS === //

.Button--color-white {
  --focus--color: var(--color--white);

  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--white),
      'Button--hover____bg-color': rgba(var(--color--white-rgb), 0.9),
      'Button--active____bg-color': rgba(var(--color--white-rgb), 0.85),
      'Button____color': var(--color--black),
      'Button--glass____bg-color': rgba(var(--color--white-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--white-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--white-rgb), 0.25),
      'Button--glass____color': var(--color--white),
      'Button--glass--hover____color': var(--color--white),
      'Button--glass--active____color': var(--color--white),
      'Button--outline____b-color': rgba(var(--color--white-rgb), 0.5),
      'Button--outline--hover____b-color': rgba(var(--color--white-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--white-rgb), 0.8),
      'Button--outline____color': var(--color--white),
      'Button--outline--hover____color': var(--color--white),
      'Button--outline--focus____color': var(--color--white)
    )
  );
}

.Button--color-black {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--black),
      'Button--hover____bg-color': rgba(var(--color--black-rgb), 0.9),
      'Button--active____bg-color': rgba(var(--color--black-rgb), 0.85),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--black-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--black-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--black-rgb), 0.25),
      'Button--glass____color': var(--color--black),
      'Button--glass--hover____color': var(--color--black),
      'Button--glass--active____color': var(--color--black),
      'Button--outline____b-color': rgba(var(--color--black-rgb), 0.5),
      'Button--outline--hover____b-color': rgba(var(--color--black-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--black-rgb), 0.8),
      'Button--outline____color': var(--color--black),
      'Button--outline--hover____color': var(--color--black),
      'Button--outline--focus____color': var(--color--black)
    )
  );
}

.Button--color-alert {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--alert),
      'Button--hover____bg-color': var(--color--alert-dark),
      'Button--active____bg-color': var(--color--alert-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--alert-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--alert-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--alert-rgb), 0.25),
      'Button--glass____color': var(--color--alert-dark),
      'Button--glass--hover____color': var(--color--alert-darkest),
      'Button--glass--active____color': var(--color--alert-darkest),
      'Button--outline____b-color': rgba(var(--color--alert-rgb), 0.5),
      'Button--outline--hover____b-color': rgba(var(--color--alert-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--alert-rgb), 0.8),
      'Button--outline____color': var(--color--alert),
      'Button--outline--hover____color': var(--color--alert),
      'Button--outline--focus____color': var(--color--alert)
    )
  );
}

.Button--color-close {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--close),
      'Button--hover____bg-color': var(--color--close-dark),
      'Button--active____bg-color': var(--color--close-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--close-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--close-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--close-rgb), 0.25),
      'Button--glass____color': var(--color--close-dark),
      'Button--glass--hover____color': var(--color--close-darkest),
      'Button--glass--active____color': var(--color--close-darkest),
      'Button--outline____b-color': rgba(var(--color--close-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--close-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--close-rgb), 0.8),
      'Button--outline____color': var(--color--close),
      'Button--outline--hover____color': var(--color--close),
      'Button--outline--focus____color': var(--color--close)
    )
  );
}

.Button--color-coachmark {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--coachmark),
      'Button--hover____bg-color': var(--color--coachmark-dark),
      'Button--active____bg-color': var(--color--coachmark-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--coachmark-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--coachmark-rgb), 0.2),
      'Button--glass--active____bg-color':
        rgba(var(--color--coachmark-rgb), 0.25),
      'Button--glass____color': var(--color--coachmark-dark),
      'Button--glass--hover____color': var(--color--coachmark-darkest),
      'Button--glass--active____color': var(--color--coachmark-darkest),
      'Button--outline____b-color': rgba(var(--color--coachmark-rgb), 0.5),
      'Button--outline--hover____b-color':
        rgba(var(--color--coachmark-rgb), 0.7),
      'Button--outline--active____b-color':
        rgba(var(--color--coachmark-rgb), 0.8),
      'Button--outline____color': var(--color--coachmark),
      'Button--outline--hover____color': var(--color--coachmark),
      'Button--outline--focus____color': var(--color--coachmark)
    )
  );
}

.Button--color-dscout {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--dscout),
      'Button--hover____bg-color': var(--color--dscout-dark),
      'Button--active____bg-color': var(--color--dscout-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--dscout-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--dscout-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--dscout-rgb), 0.25),
      'Button--glass____color': var(--color--dscout-dark),
      'Button--glass--hover____color': var(--color--dscout-darkest),
      'Button--glass--active____color': var(--color--dscout-darkest),
      'Button--outline____b-color': rgba(var(--color--dscout-rgb), 0.5),
      'Button--outline--hover____b-color': rgba(var(--color--dscout-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--dscout-rgb), 0.8),
      'Button--outline____color': var(--color--dscout),
      'Button--outline--hover____color': var(--color--dscout),
      'Button--outline--focus____color': var(--color--dscout)
    )
  );
}

.Button--color-archive {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--archive),
      'Button--hover____bg-color': var(--color--archive-dark),
      'Button--active____bg-color': var(--color--archive-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--archive-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--archive-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--archive-rgb), 0.25),
      'Button--glass____color': var(--color--archive-dark),
      'Button--glass--hover____color': var(--color--archive-darkest),
      'Button--glass--active____color': var(--color--archive-darkest),
      'Button--outline____b-color': rgba(var(--color--archive-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--archive-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--archive-rgb), 0.8),
      'Button--outline____color': var(--color--archive),
      'Button--outline--hover____color': var(--color--archive),
      'Button--outline--focus____color': var(--color--archive)
    )
  );
}

.Button--color-none {
  @include generate-button-color-variables(
    (
      'Button____bg-color': rgba(var(--color--main-rgb), 0),
      'Button--hover____bg-color': rgba(var(--color--main-rgb), 0.05),
      'Button--active____bg-color': rgba(var(--color--main-rgb), 0.08),
      'Button____color': rgba(var(--color--main-rgb), 0.8),
      'Button--hover____color': rgba(var(--color--main-rgb), 0.9),
      'Button--active____color': var(--color--main),
      'Button--glass____bg-color': rgba(var(--color--main-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--main-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--main-rgb), 0.25),
      'Button--glass____color': var(--Button____color),
      'Button--glass--hover____color': var(--Button--hover____color),
      'Button--glass--active____color': var(--Button--active____color),
      'Button--outline____b-color': rgba(var(--color--main-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--main-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--main-rgb), 0.8),
      'Button--outline____color': var(--color--main),
      'Button--outline--hover____color': var(--color--main),
      'Button--outline--focus____color': var(--color--main)
    )
  );
}

.Button--color-success {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--green-900),
      'Button--hover____bg-color': var(--color--green-925),
      'Button--active____bg-color': var(--color--green-950),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--success-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--success-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--success-rgb), 0.25),
      'Button--glass____color': var(--color--green-925),
      'Button--glass--hover____color': var(--color--green-950),
      'Button--glass--active____color': var(--color--green-950),
      'Button--outline____b-color': rgba(var(--color--success-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--success-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--success-rgb), 0.8),
      'Button--outline____color': var(--color--green-900),
      'Button--outline--hover____color': var(--color--green-900),
      'Button--outline--focus____color': var(--color--green-900)
    )
  );
}

.Button--color-screener {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--screener),
      'Button--hover____bg-color': var(--color--screener-dark),
      'Button--active____bg-color': var(--color--screener-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--screener-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--screener-rgb), 0.2),
      'Button--glass--active____bg-color':
        rgba(var(--color--screener-rgb), 0.25),
      'Button--glass____color': var(--color--screener-dark),
      'Button--glass--hover____color': var(--color--screener-darkest),
      'Button--glass--active____color': var(--color--screener-darkest),
      'Button--outline____b-color': rgba(var(--color--screener-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--screener-rgb), 0.7),
      'Button--outline--active____b-color':
        rgba(var(--color--screener-rgb), 0.8),
      'Button--outline____color': var(--color--screener),
      'Button--outline--hover____color': var(--color--screener),
      'Button--outline--focus____color': var(--color--screener)
    )
  );
}

.Button--color-diary {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--diary),
      'Button--hover____bg-color': var(--color--diary-dark),
      'Button--active____bg-color': var(--color--diary-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--diary-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--diary-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--diary-rgb), 0.25),
      'Button--glass____color': var(--color--diary-dark),
      'Button--glass--hover____color': var(--color--diary-darkest),
      'Button--glass--active____color': var(--color--diary-darkest),
      'Button--outline____b-color': rgba(var(--color--diary-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--diary-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--diary-rgb), 0.8),
      'Button--outline____color': var(--color--diary),
      'Button--outline--hover____color': var(--color--diary),
      'Button--outline--focus____color': var(--color--diary)
    )
  );
}

.Button--color-note {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--note),
      'Button--hover____bg-color': var(--color--note-dark),
      'Button--active____bg-color': var(--color--note-darkest),
      'Button____color': var(--color--archive-darkest),
      'Button--glass____bg-color': rgba(var(--color--note-rgb), 0.25),
      'Button--glass--hover____bg-color': rgba(var(--color--note-rgb), 0.35),
      'Button--glass--active____bg-color': rgba(var(--color--note-rgb), 0.4),
      'Button--glass____color': var(--color--archive-dark),
      'Button--glass--hover____color': var(--color--archive-darkest),
      'Button--glass--active____color': var(--color--archive-darkest),
      'Button--outline____b-color': rgba(var(--color--note-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--note-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--note-rgb), 0.8),
      'Button--outline____color': var(--color--archive),
      'Button--outline--hover____color': var(--color--archive),
      'Button--outline--focus____color': var(--color--archive)
    )
  );
}

.Button--color-test {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--test),
      'Button--hover____bg-color': var(--color--test-dark),
      'Button--active____bg-color': var(--color--test-darkest),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--test-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--test-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--test-rgb), 0.25),
      'Button--glass____color': var(--color--test-dark),
      'Button--glass--hover____color': var(--color--test-darkest),
      'Button--glass--active____color': var(--color--test-darkest),
      'Button--outline____b-color': rgba(var(--color--test-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--test-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--test-rgb), 0.8),
      'Button--outline____color': var(--color--test),
      'Button--outline--hover____color': var(--color--test),
      'Button--outline--focus____color': var(--color--test)
    )
  );
}

.Button--color-invert {
  --focus--color: var(--color--invert);

  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--color--invert),
      'Button--hover____bg-color': rgba(var(--color--invert-rgb), 0.9),
      'Button--active____bg-color': rgba(var(--color--invert-rgb), 0.85),
      'Button____color': var(--color--main),
      'Button--glass____bg-color': rgba(var(--color--invert-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--invert-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--invert-rgb), 0.25),
      'Button--glass____color': var(--color--invert),
      'Button--glass--hover____color': var(--color--invert),
      'Button--glass--active____color': var(--color--invert),
      'Button--outline____b-color': rgba(var(--color--invert-rgb), 0.4),
      'Button--outline--hover____b-color': rgba(var(--color--invert-rgb), 0.7),
      'Button--outline--active____b-color': rgba(var(--color--invert-rgb), 0.8),
      'Button--outline____color': var(--color--invert),
      'Button--outline--hover____color': var(--color--invert),
      'Button--outline--focus____color': var(--color--invert)
    )
  );
}

.Button--color-ai {
  @include generate-button-color-variables(
    (
      'Button____bg-color': var(--Button--hover____bg-color)
        var(--gradient--ai-reverse-a),
      'Button--hover____bg-color': var(--color--ai-purple-500),
      'Button--active____bg-color': var(--color--ai-purple-600),
      'Button____color': var(--color--white),
      'Button--glass____bg-color': rgba(var(--color--black-rgb), 0.1),
      'Button--glass--hover____bg-color': rgba(var(--color--black-rgb), 0.2),
      'Button--glass--active____bg-color': rgba(var(--color--black-rgb), 0.25),
      'Button--glass____color': var(--color--black),
      'Button--glass--hover____color': var(--color--black),
      'Button--glass--active____color': var(--color--black),
      'Button--outline____b-color': var(--color--ai-purple-600),
      'Button--outline--hover____b-color': var(--color--ai-purple-700),
      'Button--outline--active____b-color': var(--color--ai-purple-800),
      'Button--outline____color': var(--color--ai-purple-600),
      'Button--outline--hover____color': var(--color--ai-purple-700),
      'Button--outline--focus____color': var(--color--ai-purple-800)
    )
  );

  // AI filled buttons are not grayscale when disabled and have a custom background color
  &[disabled] {
    filter: none;
    opacity: 1;
    background: linear-gradient(257deg, rgba(246, 109, 176, 0.30) -30.37%, rgba(181, 91, 245, 0.30) 87.59%);
  }

  &.Button--outline[disabled] {
    filter: grayscale(1);
    background: none;
    opacity: 0.3;
  }
}

// === PLAIN BUTTONS === //

.Button--plain {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity var(--Button____transition-duration);

  &:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    pointer-events: none;
  }
}

// === SIZES === //

.Button--tiny {
  border-radius: var(--Button--tiny____radius);
  font-size: var(--Button--tiny____font-size);
  padding: var(--Button--tiny____padding);
}

.Button--small {
  border-radius: var(--Button--small____radius);
  font-size: var(--Button--small____font-size);
  padding: var(--Button--small____padding);
}

.Button--big {
  border-radius: var(--Button--big____radius);
  font-size: var(--Button--big____font-size);
  padding: var(--Button--big____padding);
}

// === WIDTHS === //

.Button--tight {
  padding-left: var(--Button--tight____padding);
  padding-right: var(--Button--tight____padding);
}

.Button--fullwidth {
  display: block;
  width: 100%;
}