import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';
import formControlStyles from '../../styles/form-control.styles.mjs';

const styles = css`
  ${componentStyles}
  ${formControlStyles}

  :host {
    display: block;
    margin-block: var(--flow-ui-spacing-medium);
  }

  :host([label]) {
    margin-top: var(--flow-ui-spacing-x-large);
  }

  .form-control {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: var(--flow-ui-spacing-x-small);
    align-items: center;
    font-family: var(--flow-ui-control-font-family);
    font-size: inherit;
    font-weight: var(--flow-ui-control-font-weight);
    line-height: var(--flow-ui-line-height-dense);

    --control-background-color: transparent;
    --control-border-color: transparent;
  }

  .form-control.form-group--has-border {
    --control-background-color: var(--flow-ui-form-group-background-color);
    --control-border-color: var(--flow-ui-form-group-border-color);
  }

  .form-control.form-control--has-label .form-control__label {
    color: var(--flow-ui-color-text);
    font-weight: var(--flow-ui-font-weight-semibold);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .form-control.form-control--has-help-text .form-control__help-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .form-control.form-control--has-label .form-group__content,
  .form-control.form-control--has-help-text .form-group__content {
    margin-top: var(--flow-ui-spacing-x-small);
  }

  .form-group__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: var(--control-spacing);
    padding-block: calc(var(--control-spacing) / 2);
    background-color: var(--control-background-color);
  }

  .form-control.form-group--has-dividers .form-group__content {
    grid-row-gap: var(--flow-ui-spacing-x-small);
  }

  /* Borders */

  .form-group--has-border .form-group__content {
    margin-inline: calc(var(--control-spacing) * -1 - var(--control-border-width));
    padding-inline: var(--control-spacing);
    border: solid var(--control-border-width) var(--control-border-color);
    border-radius: var(--control-border-radius);
  }

  /* Variants */

  .form-control.form-control--warning {
    --control-border-color: var(--flow-ui-color-warning-500);
  }

  .form-control.form-control--danger {
    --control-border-color: var(--flow-ui-color-danger-500);
  }
`;

export { styles as default };
