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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    --grid-width: 300px;
  }

  /*------- Color mode radio styles ------ */

  .color-mode-radio-group {
    width: 100%;
  }

  .color-mode-radio {
    margin-bottom: var(--flow-ui-spacing-x-small);
  }

  .color-mode-radio:last-child {
    margin-bottom: var(--flow-ui-spacing-small);
  }

  .color-mode-radio::part(base) {
    display: flex;
    align-items: center;
  }

  .color-mode-radio::part(label) {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--flow-ui-spacing-x-small);
  }

  .color-mode-control {
    /* Right-align color mode controls */
    margin-inline-start: auto;
  }

  /*------- Fixed color picker styles ------ */

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

  flow-ui-color-picker {
    --grid-width: inherit;
  }

  /* ------- Color stops styles ------- */

  .color-stops {
    display: flex;
    flex-direction: column;
  }

  .color-mapper--small .color-stops {
    gap: var(--flow-ui-spacing-x-small);
  }

  .color-mapper--medium .color-stops {
    gap: var(--flow-ui-spacing-x-small);
  }

  .color-mapper--large .color-stops {
    gap: var(--flow-ui-spacing-small);
  }

  flow-ui-color-stop::part(color-picker) {
    --grid-width: inherit;
  }

  /* Hide color stop placeholder when color-mode is fixed */
  .color-mapper--fixed .color-stop-placeholder {
    display: none;
  }

  .color-mapper--data-driven flow-ui-color-stop[data-user-invalid]::part(input) {
    --flow-ui-control-border-color: var(--flow-ui-color-danger-500);
    --flow-ui-control-border-color-hover: var(--flow-ui-color-danger-500);
    --flow-ui-control-border-color-focus: var(--flow-ui-color-danger-500);
    --flow-ui-control-focus-ring-color: var(--flow-ui-color-danger-100);
  }
`;

export { styles as default };
