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

const styles = css`
  ${componentStyles}

  :host {
    --closed-rotation: 0deg;
    --open-rotation: 180deg;
  }

  :host([position='right'])  {
    --closed-rotation: 180deg;
    --open-rotation: 0deg;
  }

  :host([position='top'])  {
    --closed-rotation: 0deg;
    --open-rotation: 90deg;
  }

  :host([position='bottom'])  {
    --closed-rotation: 0deg;
    --open-rotation: 90deg;
  }

  :host([closed]) .icon-button {
    transform: rotate(var(--closed-rotation));
  }

  :host(:not([closed])) .icon-button {
    transform: rotate(var(--open-rotation));
  }

  .icon-button {
    transition: transform var(--flow-ui-transition-medium) ease-in-out;
  }
`;

export { styles as default };
