import styled from 'styled-components/macro';

import { color, other, shadow, typography } from '../../theme';
import { Icon } from '../Icon/Icon';

export const StyledPanel = styled.div`
  display: flex;
  flex-direction: column;
`;

export const StyledTrigger = styled.button<{ $reversed: boolean }>`
  @mixin ${typography('sys/typography/group-header')};

  align-items: center;
  background: none;
  border: none;
  color: ${color('sys/color/primary/default')};
  cursor: pointer;
  display: flex;
  gap: 8px;
  order: ${({ $reversed }) => ($reversed ? 1 : 0)};
  outline: none;
  padding: 8px 0;
  text-align: left;
  width: 100%;

  &:focus-visible {
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;

export const TunedIcon = styled(Icon)`
  flex-shrink: 0;
  height: 24px;
  width: 24px;
`;

export const animationDuration = 500;
export const heightVariableName = '--hive-extendable-panel-max-height';

export const StyledContent = styled.div`
  height: auto;
  overflow: hidden;
  transition: height ${animationDuration}ms ${other('sys/timing-function/smooth')};
  &.enter {
    height: 0;
  }
  &.enter-active {
    height: var(${heightVariableName}, 0);
  }
  &.enter-done {
    height: auto;
  }
  &.exit {
    height: var(${heightVariableName}, 0);
  }
  &.exit-active {
    height: 0;
  }
  &.exit-done {
    height: 0;
  }
`;