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__input {
    padding-inline: var(--control-spacing);
  }

  .form-control__input input {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    height: 100%;
    color: var(--control-color);
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    cursor: inherit;
    outline: none;
    -webkit-appearance: none;
  }

  .form-control.form-control--inline input {
    min-width: 15ch;
  }
`;

export { styles as default };
