import styled from '@emotion/styled';

import { smallTrackHeight } from '../edit2025/StemsContext';
import { PanelSize } from '../panelSystem/PanelSystem';

export const HorizontalDivider = styled.div`
  height: 1px;
  width: 100%;
  background-color: var(--color-background-secondary);
  position: relative;
  z-index: 2;

  &:after {
    display: block;
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
    z-index: 2;
  }

  [data-influence='neither'] &:after {
    display: none;
  }
`;

export const ThickGapHorizontalDivider = styled(HorizontalDivider)<{
  transparent?: boolean;
}>`
  height: 2px;
  background-color: ${({ transparent }) =>
    transparent ? 'transparent' : 'var(--color-background-secondary)'};
`;

export const NarrowGapHorizontalDivider = styled(HorizontalDivider)`
  height: 1px;
  background-color: var(--color-background-secondary);
`;

export const VerticalDivider = styled.div`
  width: 1px;
  height: 100%;
  background-color: var(--color-background-secondary);
  position: relative;
  z-index: 2;
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    right: -5px;
    z-index: 2;
  }

  [data-influence='neither'] &:after {
    display: none;
  }
`;

export const ThickGapVerticalDivider = styled(VerticalDivider)<{
  transparent?: boolean;
}>`
  width: 2px;
  background-color: ${({ transparent }) =>
    transparent ? 'transparent' : 'var(--color-background-secondary)'};
`;

export const NarrowGapVerticalDivider = styled(VerticalDivider)`
  width: 2px;
  background-color: var(--color-background-priamry);
`;

export const smallPanelSize: PanelSize = {
  unit: 'px',
  count: smallTrackHeight,
};

export const headerPanelSize: PanelSize = {
  unit: 'px',
  count: 60,
};

export const transportPanelSize: PanelSize = {
  unit: 'px',
  count: 75,
};

export const studioTransportPanelSize: PanelSize = {
  unit: 'px',
  count: 50,
};

export const oneFRPanelSize: PanelSize = {
  unit: 'fr',
  count: 1,
};

export const generateFormStylesPanelSize: PanelSize = {
  unit: 'px',
  count: 120,
};

export const trackHeadersPanelSize: PanelSize = {
  unit: 'px',
  count: 210,
};

export const collapsedTrackHeadersPanelSize: PanelSize = {
  unit: 'px',
  count: 40,
};