import styled from 'styled-components/macro';

import { shadow } from '../../../../theme';
import { color } from '../../../../theme/color';

export const StyledTrigger = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  width: 100%;

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

export const StyledIconWrapper = styled.div<{ $active: boolean; $hover: boolean }>`
  align-items: center;
  background: ${({ $active, $hover }) => {
    if ($active) {
      return color('sys/color/primary/backdrop/active');
    }
    if ($hover) {
      return color('sys/color/primary/backdrop/hover');
    } else {
      return 'transparent';
    }
  }};
  border-radius: 8px;
  display: flex;
  height: 40px;
  justify-content: center;
  margin: 0 auto;
  width: 40px;
`;

export const animationDuration = 200;

export const StyledSubNav = styled.nav`
  display: none;
  min-height: 100vh;
  opacity: 0;

  &.enter {
    display: block;
    transition: opacity ${animationDuration}ms linear ${animationDuration}ms;
  }

  &.enter-active,
  &.enter-done {
    display: block;
    opacity: 1;
  }

  &.exit {
    transition: opacity ${animationDuration}ms linear;
  }

  &.exit-active,
  &.exit-done {
    opacity: 0;
  }

  &.exit-done {
    display: none;
  }
`;

export const StyledSubMenu = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
`;

export const StyledSubMenuHeader = styled.header`
  color: ${color('sys/color/text/primary')};
  font-size: 19px;
  font-weight: 400;
  line-height: 22px;
  padding: 32px 32px 21px;
`;