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;
    isolation: isolate;
  }

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

  .form-control__label {
    padding: 0;
  }

  .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;
  }

  /* Add gap between buttons when text-only buttons are used */
  .button-group--x-small.button-group--no-outline::part(base) {
    gap: var(--flow-ui-spacing-2x-small);
  }

  .button-group--small.button-group--no-outline::part(base) {
    gap: var(--flow-ui-spacing-2x-small);
  }

  .button-group--medium.button-group--no-outline::part(base) {
    gap: var(--flow-ui-spacing-2x-small);
  }

  .button-group--large.button-group--no-outline::part(base) {
    gap: var(--flow-ui-spacing-x-small);
  }
`;

export { styles as default };
