import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
import { css } from 'lit';

const iconColor = new VariableHelper()
  .withGroupModifier('accordion', 'icon')
  .withVariableName('color')
  .withDefaultValue('currentColor')
  .toCss();

export const headerStyles = css`
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-inline: var(--_padding-inline);
    border-width: var(--_header--border-width);
    border-style: solid;
    border-color: var(--_header--border-color);
  }
`;

export const chevronStyles = css`
  .o-icon__chevron-down {
    width: 1rem;
    height: 1rem;
    display: block;
    position: relative;
  }

  .o-icon__chevron-down::before,
  .o-icon__chevron-down::after {
    content: '';
    background-color: ${iconColor};
    position: absolute;
    top: 50%;
    height: 1px;
    width: 50%;
    border: 1px solid ${iconColor};
    transition: transform 0.3s ease-out;
  }

  .o-icon__chevron-down::before {
    transform: translateY(-50%)
      rotate(calc(var(--_rotation-displacement, 1) * 45deg));
    left: 0;
  }

  .o-icon__chevron-down::after {
    transform: translateY(-50%)
      rotate(calc(var(--_rotation-displacement, 1) * -45deg));
    right: 0;
  }

  :host([open]) .o-icon__chevron-down {
    --_rotation-displacement: -1;
  }

  :host([open]) .o-icon__chevron-down::before,
  :host([open]) .o-icon__chevron-down::after {
    transition-timing-function: ease-in;
  }
`;

export const plustoMinusStyles = css`
  .o-icon__plus-to-minus {
    width: 1rem;
    height: 1rem;
    display: block;
    position: relative;
  }

  .o-icon__plus-to-minus::before,
  .o-icon__plus-to-minus::after {
    content: '';
    background-color: ${iconColor};
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    border: 1px solid ${iconColor};
    transition: transform 0.3s ease-out;
  }

  .o-icon__plus-to-minus::before {
    transform: translateY(-50%)
      rotate(calc(var(--_rotation-displacement, 1) * 90deg));
  }

  .o-icon__plus-to-minus::after {
    transform: translateY(-50%);
  }

  :host([open]) .o-icon__plus-to-minus {
    --_rotation-displacement: 2;
  }

  :host([open]) .o-icon__plus-to-minus::before,
  :host([open]) .o-icon__plus-to-minus::after {
    transition-timing-function: ease-in;
  }
`;

export const plusToCrossStyles = css`
  .o-icon__plus-to-cross {
    width: 1rem;
    height: 1rem;
    display: block;
    position: relative;
  }

  .o-icon__plus-to-cross::before,
  .o-icon__plus-to-cross::after {
    content: '';
    background-color: ${iconColor};
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    border: 1px solid ${iconColor};
    transition: transform 0.3s ease-out;
  }

  .o-icon__plus-to-cross::before {
    transform: translateY(-50%)
      rotate(calc(var(--_rotation-displacement, 2) * 135deg));
  }

  .o-icon__plus-to-cross::after {
    transform: translateY(-50%)
      rotate(calc(var(--_rotation-displacement, 0) * 45deg));
  }

  :host([open]) .o-icon__plus-to-cross {
    --_rotation-displacement: 1;
  }

  :host([open]) .o-icon__plus-to-cross::before,
  :host([open]) .o-icon__plus-to-cross::after {
    transition-timing-function: ease-in;
  }
`;