import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: block;
  }

  .color-stop {
    --spacing: var(--flow-ui-spacing-small);

    display: flex;
    align-items: center;
    gap: var(--spacing);
  }

  .color-stop * {
    flex: 0;
  }

  .color-stop__input {
    flex: 1;
  }

  .color-stop__input::part(base) {
    min-width: 15em;
  }

  .color-stop__input::part(suffix) {
    /* remove excessive space from suffix */
    --flow-ui-control-spacing-small: var(--flow-ui-spacing-2x-small);
    --flow-ui-control-spacing-medium: var(--flow-ui-spacing-x-small);
    --flow-ui-control-spacing-large: var(--flow-ui-spacing-x-small);
  }

  /* Sizes */

  .color-stop--small {
    font-size: var(--flow-ui-control-font-size-small);
    --spacing: var(--flow-ui-spacing-x-small);
  }

  .color-stop--medium {
    font-size: var(--flow-ui-control-font-size-medium);
    --spacing: var(--flow-ui-spacing-x-small);
  }

  .color-stop--large {
    font-size: var(--flow-ui-control-font-size-large);
    --spacing: var(--flow-ui-spacing-small);
  }

  /* Color picker styling */

  .color-stop__picker::part(trigger) {
    /* match input box styling */
    border-radius: var(--flow-ui-control-border-radius-small);
  }

  /* Default variant */
  .color-stop--fixed .color-stop__input::part(base) {
    background-color: initial;
    cursor: initial;
  }

  .color-stop--fixed .confirm__tooltip {
    visibility: hidden;
  }

  .color-stop--fixed .toolbar-button,
  .color-stop--fixed .units {
    display: none;
  }

  /* Buttons */

  .color-stop__remove-button {
    margin-inline-start: calc(var(--flow-ui-spacing-x-small) * -1);
  }

  .toolbar-button {
    margin-inline-end: 0;
  }

  /* Placeholder & default variants */
  .color-stop--placeholder .color-stop__remove-button {
    visibility: hidden;
  }

  .color-stop--placeholder .text-options-button-group,
  .color-stop--placeholder .units {
    display: none;
  }
`;

export { styles as default };
