import { css } from 'lit';
import buttonStyles from '../button/button.styles.mjs';

const styles = css`
  ${buttonStyles}

  :host {
    --background-color: var(--flow-ui-color-primary-50);
    --border-color: var(--flow-ui-color-primary-300);
    --color: var(--flow-ui-color-primary-500);
    --flow-ui-button-text-transform: none;
  }

  .button {
    /* font-weight: var(--flow-ui-font-weight-light); */
  }

  .button__prefix,
  .button__suffix,
  .button__label {
    display: inline-flex;
    position: relative;
    align-items: center;
  }

  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
  .hidden-input {
    all: unset;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    outline: dotted 1px red;
    opacity: 0;
    z-index: -1;
  }

  /* Hide unused parts of button */
  .button:not(.button--has-label) .button__label {
    display: none;
  }

  .button:not(.button--has-icon) .button__icon {
    display: none;
  }

  /* Remove use of line-height to set height of button */
  .button {
    line-height: normal;
    min-height: 0;
  }

  /* Remove padding from label. This is added to label wrapper div instead. */
  .button--has-label.button--x-small .button__label {
    padding: 0;
  }

  .button--has-label.button--small .button__label {
    padding: 0;
  }

  .button--has-label.button--medium .button__label {
    padding: 0;
  }

  .button--has-label.button--large .button__label {
    padding: 0;
  }

  /* Variants */
  .button--primary {
    --background-color: var(--flow-ui-color-primary-50);
    --border-color: var(--flow-ui-color-primary-300);
    --color: var(--flow-ui-color-primary-700);
  }

  .button--secondary {
    --background-color: var(--flow-ui-color-secondary-50);
    --border-color: var(--flow-ui-color-secondary-300);
    --color: var(--flow-ui-color-secondary-700);
  }

  .button--success {
    --background-color: var(--flow-ui-color-success-50);
    --border-color: var(--flow-ui-color-success-300);
    --color: var(--flow-ui-color-success-700);
  }

  .button--warning {
    --background-color: var(--flow-ui-color-warning-50);
    --border-color: var(--flow-ui-color-warning-300);
    --color: var(--flow-ui-color-warning-700);
  }

  .button--danger {
    --background-color: var(--flow-ui-color-danger-50);
    --border-color: var(--flow-ui-color-danger-300);
    --color: var(--flow-ui-color-danger-700);
  }

  .button--neutral {
    --background-color: var(--flow-ui-color-neutral-50);
    --border-color: var(--flow-ui-color-neutral-300);
    --color: var(--flow-ui-color-neutral-700);
  }

  /* Override outline style */
  .button--outline.button--default {
    border-color: var(--flow-ui-color-neutral-600);
    color: var(--flow-ui-color-neutral-800);
  }

  .button--outline.button--default.button--checked:not(.button--disabled) {
    border-color: var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
  }

  .button--outline.button--default:hover:not(.button--disabled) {
    border-color: var(--flow-ui-color-neutral-300);
    background-color: transparent;
    color: var(--color);
  }

  .button--outline.button--default.button--checked:hover:not(.button--disabled) {
    border-color: var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
  }

  .button--outline.button--default:active:not(.button--disabled) {
    border-color: var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
  }

  .button--outline.button--default.button--checked:active:not(.button--disabled) {
    border-color: var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
  }

  /* Override text style */
  .button--text {
    background-color: transparent;
    border-color: transparent;
    color: var(--flow-ui-color-neutral-800);
  }

  .button--text.button--checked:not(.button--disabled) {
    border-color: var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
  }

  .button--text:hover:not(.button--disabled) {
    color: var(--color);
  }

  .button--text:active:not(.button--disabled) {
    color: var(--color);
  }

  .button--text.button--x-small {
    border-radius: var(--flow-ui-control-border-radius-x-small) !important;
  }

  .button--text.button--small {
    border-radius: var(--flow-ui-control-border-radius-small) !important;
  }

  .button--text.button--medium {
    border-radius: var(--flow-ui-control-border-radius-medium) !important;
  }

  .button--text.button--large {
    border-radius: var(--flow-ui-control-border-radius-large) !important;
  }

  /* Label wrapper styles */
  .button__label-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: unset;
  }

  .button--x-small .button__label-wrapper {
    padding: var(--flow-ui-spacing-2x-small);
    gap: var(--flow-ui-spacing-2x-small);
  }

  .button--x-small .button__icon {
    font-size: var(--flow-ui-font-size-small);
  }

  .button--small .button__label-wrapper {
    padding: var(--flow-ui-spacing-x-small);
    gap: var(--flow-ui-spacing-2x-small);
  }

  .button--small .button__icon {
    font-size: var(--flow-ui-font-size-small);
  }

  .button--medium .button__label-wrapper {
    padding: var(--flow-ui-spacing-small);
    gap: var(--flow-ui-spacing-x-small);
  }

  .button--medium .button__icon {
    font-size: var(--flow-ui-font-size-medium);
  }

  .button--large .button__label-wrapper {
    padding: var(--flow-ui-spacing-medium);
    gap: var(--flow-ui-spacing-small);
  }

  .button--large .button__icon {
    font-size: var(--flow-ui-font-size-large);
  }

  /*
   * Pill modifier
   */
  .button--pill.button--x-small {
    border-radius: var(--flow-ui-control-height-small);
  }

  .button--pill.button--small {
    border-radius: var(--flow-ui-control-height-small);
  }

  .button--pill.button--medium {
    border-radius: var(--flow-ui-control-height-medium);
  }

  .button--pill.button--large {
    border-radius: var(--flow-ui-control-height-large);
  }

  /* Tooltip */
  .tool-button__tooltip {
    --show-delay: var(--flow-ui-button-tooltip-delay);
  }
`;

export { styles as default };
