import { css } from 'lit';

const formControlStyles = css`
  .form-control {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: calc(var(--control-spacing) / 2);

    font-family: var(--flow-ui-control-font-family);
    font-size: var(--control-font-size);
    font-weight: var(--flow-ui-control-font-weight);
    line-height: var(--flow-ui-line-height-dense);

    --control-background-color: var(--flow-ui-control-background-color);
    --control-background-color-hover: var(--flow-ui-control-background-color-hover);
    --control-background-color-focus: var(--flow-ui-control-background-color-focus);
    --control-background-color-disabled: var(--flow-ui-control-background-color-disabled);

    --control-border-color: var(--flow-ui-control-border-color);
    --control-border-color-hover: var(--flow-ui-control-border-color-hover);
    --control-border-color-focus: var(--flow-ui-control-border-color-focus);
    --control-border-color-disabled: var(--flow-ui-control-border-color-disabled);
    --control-border-width: var(--flow-ui-control-border-width);

    --control-color: var(--flow-ui-control-color);
    --control-color-hover: var(--flow-ui-control-color-hover);
    --control-color-focus: var(--flow-ui-control-color-focus);
    --control-color-disabled: var(--flow-ui-control-color-disabled);

    --control-height: var(--flow-ui-control-height-medium);
    --control-spacing: var(--flow-ui-control-spacing-medium);
    --control-border-radius: var(--flow-ui-control-border-radius-medium);
    --control-font-size: var(--flow-ui-control-font-size-medium);

    --control-label-color: var(--flow-ui-control-label-color);
    --control-label-font-size: var(--flow-ui-control-label-font-size-medium);

    --control-help-text-color: var(--flow-ui-control-help-text-color);
    --control-help-text-font-size: var(--flow-ui-control-help-text-font-size-medium);
  }

  .form-control.form-control--inline {
    grid-template-columns: 1fr min-content;
    grid-row-gap: 0;
  }

  /* Sizes */
  .form-control.form-control--small {
    --control-height: var(--flow-ui-control-height-small);
    --control-spacing: var(--flow-ui-control-spacing-small);
    --control-border-radius: var(--flow-ui-control-border-radius-small);
    --control-font-size: var(--flow-ui-control-font-size-small);
    --control-label-font-size: var(--flow-ui-control-label-font-size-small);
    --control-help-text-font-size: var(--flow-ui-control-help-text-font-size-small);
  }

  .form-control.form-control--large {
    --control-height: var(--flow-ui-control-height-large);
    --control-spacing: var(--flow-ui-control-spacing-large);
    --control-border-radius: var(--flow-ui-control-border-radius-large);
    --control-font-size: var(--flow-ui-control-font-size-large);
    --control-label-font-size: var(--flow-ui-control-label-font-size-large);
    --control-help-text-font-size: var(--flow-ui-control-help-text-font-size-large);
  }

  /* Variants */

  .form-control.form-control--inline {
    --control-background-color: var(--flow-ui-control-inline-background-color);
    --control-background-color-hover: var(--flow-ui-control-inline-background-color-hover);
    --control-background-color-focus: var(--flow-ui-control-inline-background-color-focus);
    --control-background-color-disabled: var(--flow-ui-control-inline-background-color-disabled);

    --control-border-color: var(--flow-ui-control-inline-border-color);
    --control-border-color-hover: var(--flow-ui-control-inline-border-color-hover);
    --control-border-color-focus: var(--flow-ui-control-inline-border-color-focus);
    --control-border-color-disabled: var(--flow-ui-control-inline-border-color-disabled);

    --control-border-width: var(--flow-ui-control-inline-border-width);
  }

  .form-control.form-control--filled {
    --control-background-color: var(--flow-ui-control-filled-background-color);
    --control-background-color-hover: var(--flow-ui-control-filled-background-color-hover);
    --control-background-color-focus: var(--flow-ui-control-filled-background-color-focus);
    --control-background-color-disabled: var(--flow-ui-control-filled-background-color-disabled);

    --control-border-color: var(--flow-ui-control-filled-border-color);
    --control-border-color-hover: var(--flow-ui-control-filled-border-color-hover);
    --control-border-color-focus: var(--flow-ui-control-filled-border-color-focus);
    --control-border-color-disabled: var(--flow-ui-control-filled-border-color-disabled);

    --control-border-width: var(--flow-ui-control-filled-border-width);
  }

  /* Input */
  .form-control .form-control__input {
    display: flex;
    height: var(--control-height);
    font-size: var(--control-font-size);
    color: var(--control-color);
    background-color: var(--control-background-color);
    border: solid var(--control-border-width) var(--control-border-color);
    border-radius: var(--control-border-radius);
  }

  .form-control.form-control--disabled .form-control__input {
    background-color: var(--control-background-color-disabled);
    border-color: var(--control-border-color-disabled);
    color: var(--control-color-disabled);
    cursor: not-allowed;
  }

  .form-control:not(.form-control--disabled) .form-control__input:hover {
    background-color: var(--control-background-color-hover);
    border-color: var(--control-border-color-hover);
  }

  .form-control:not(.form-control--disabled).form-control--open .form-control__input,
  .form-control:not(.form-control--disabled).form-control--focused .form-control__input {
    background-color: var(--control-background-color-focus);
    border-color: var(--control-border-color-focus);
    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-control-focus-ring-color);
  }

  .form-control.form-control--inline .form-control__input {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
  .form-control.form-control--pill .form-control__input {
    border-radius: var(--control-height);
  }

  /* Label */
  .form-control .form-control__label {
    display: none;
  }

  .form-control--has-label .form-control__label {
    display: flex;
    align-items: center;
    font-size: var(--control-label-font-size);
    color: var(--control-label-color);
    user-select: none;
  }

  .form-control--disabled .form-control__label {
    color: var(--control-color-disabled);
  }

  :host([required]) .form-control--has-label .form-control__label::after {
    content: var(--flow-ui-control-required-content);
    margin-inline-start: var(--flow-ui-control-required-content-offset);
    color: var(--flow-ui-control-required-content-color);
  }

  /* Help text */
  .form-control .form-control__help-text {
    display: none;
  }

  .form-control--has-help-text .form-control__help-text {
    display: block;
    grid-column: 1 / -1;
    color: var(--control-help-text-color);
    font-size: var(--control-help-text-font-size);
    line-height: var(--flow-ui-line-height-dense);
    user-select: none;
  }

  /*
  .form-control.form-control--inline .form-control__help-text {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
  }*/

  /* Divider */
  .form-control .form-control__divider {
    display: none;
  }

  .form-control--has-divider .form-control__divider {
    --color: var(--flow-ui-color-neutral-300);
    display: block;
    grid-column: 1 / -1;
    --spacing: var(--flow-ui-spacing-x-small);
  }
`;

export { formControlStyles as default };
