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

const styles = css`
  ${componentStyles}

  :host {
    display: inline-block;
    color: var(--flow-ui-color-neutral-800);

    --hover-color: var(--flow-ui-color-primary-500);
    --active-color: var(--flow-ui-color-primary-400);
    --icon-size: inherit;
  }

  .icon-button {
    position: relative;
    width: 100%;
    /* Start new stacking context to allow z-index: -1 on :before pseudo-element */
    isolation: isolate;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--flow-ui-spacing-x-small);
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--flow-ui-border-radius-medium);
    font-size: inherit;
    color: inherit;
    padding: var(--flow-ui-spacing-x-small);
    cursor: pointer;
    transition: var(--flow-ui-transition-x-fast) color;
    -webkit-appearance: none;
  }

  .icon-button:hover:not(.icon-button--disabled),
  .icon-button:focus-visible:not(.icon-button--disabled) {
    color: var(--hover-color);
  }

  .icon-button:active:not(.icon-button--disabled) {
    color: var(--active-color);
  }

  .icon-button:focus {
    outline: none;
  }

  .icon-button--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .icon-button:focus-visible {
    outline: var(--flow-ui-focus-ring);
    outline-offset: var(--flow-ui-focus-ring-offset);
  }

  .icon-button__icon {
    pointer-events: none;
    font-size: var(--icon-size);
  }

  /* Tooltip */
  .icon-button__tooltip {
    --show-delay: var(--flow-ui-button-tooltip-delay);
  }

  /* Icon button with confirmation */
  .icon-button__tooltip--confirm::part(body) {
    padding: var(--flow-ui-spacing-2x-small);
    pointer-events: all;
  }

  .icon-button__tooltip--confirm .confirm__label {
    margin-inline: var(--flow-ui-spacing-x-small);
  }
`;

export { styles as default };
