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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    --padding: var(--flow-ui-list-item-padding);
    --height: var(--flow-ui-list-item-height);
    --color: var(--flow-ui-list-item-color);
    --accessory-color: var(--flow-ui-list-item-accessory-color);
    --background-color: var(--flow-ui-list-item-background-color);

    --selection-width: 6px;
    --selection-color: var(--flow-ui-list-item-selection-color, var(--flow-ui-color-primary-500));
    --background-color-selected: var(--flow-ui-list-item-background-color-selected, var(--flow-ui-color-neutral-500));

    --disabled-color: var(--flow-ui-list-item-color-disabled, var(--flow-ui-color-neutral-600));
    --background-color-disabled: var(--flow-ui-list-item-background-color-disabled, var(--flow-ui-color-neutral-300));
  }

  :host(:focus-visible) {
    outline: 0px;
  }

  :host([draggable='true']) {
    opacity: 0.1;
  }

  .list-item {
    display: flex;
    align-items: center;
    gap: var(--flow-ui-spacing-small);

    height: var(--height);
    padding: var(--padding);
    padding-right: calc(var(--padding) / 2);
    border-right: calc(var(--padding) / 2) solid transparent;

    color: var(--color);
    background-color: var(--background-color);
    user-select: none;
  }

  .list-item--disabled {
    color: var(--disabled-color);
    background-color: var(--background-color-disabled);
    cursor: not-allowed;
  }

  .list-item--disabled flow-ui-input::part(input) {
    color: var(--disabled-color);
  }

  .list-item--checked {
    border-right-color: var(--selection-color);
    background-color: var(--background-color-selected);
  }

  .list-item--selectable:not(.list-item--disabled) {
    cursor: pointer;
  }

  .list-item__prefix,
  .list-item__suffix,
  .list-item__menu-button,
  .list-item__reorder-icon {
    color: var(--accessory-color);
  }

  .list-item .list-item__input::part(form-control) {
    --control-background-color: var(--flow-ui-control-inline-background-color);
    --control-background-color-hover: var(--flow-ui-control-inline-background-color-hover);
    --control-background-color-focus: var(--flow-ui-control-inline-background-color-focus);
    --control-background-color-disabled: var(--flow-ui-control-inline-background-color-disabled);
  }

  .list-item:not(.list-item--editable) .list-item__input::part(form-control) {
    --control-background-color-hover: transparent;
    --control-border-color-hover: transparent;
    --control-background-color-focus: transparent;
  }

  .list-item__menu-button {
    visibility: hidden;
  }

  .list-item:hover .list-item__menu-button {
    visibility: visible;
  }

  .list-item__reorder-icon {
    cursor: move;
  }

  .list-item__input {
    flex: 1;
    margin-left: calc(var(--padding) * -0.5);
  }
`;

export { styles as default };
