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: inline-block;
  }

  .form-control {
    border: none;
    padding: 0;
    margin: 0;

    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);

    margin-bottom: calc(var(--control-spacing) * 0.5);
  }

  .form-control.form-control--has-divider {
    margin-bottom: 0;
  }

  .form-control__label {
    padding: 0;
  }

  /* Remove margins from label and help-text. Spacing is determined by row grid gap */
  .form-control.form-control--has-label .form-control__label {
    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-input {
    display: flex;
    flex-direction: column;
    gap: calc(var(--control-spacing) * 0.8);
  }

  .radio-group--required .radio-group__label::after {
    content: var(--flow-ui-control-required-content);
    margin-inline-start: var(--flow-ui-control-required-content-offset);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
`;

export { styles as default };
