import styled from 'styled-components/macro';

import { thumbColor, trackColor, trackWidth } from '../../components/Scrollable/styled';
import { ZIndex } from '../../constans/zIndex';
import { color } from '../../theme/color';

export const StyledPanel = styled.aside`
  background: ${color('sys/color/white')};
  box-shadow: 1px 0 0 ${color('sys/color/divider')};
  box-sizing: border-box;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  scrollbar-color: ${thumbColor} ${trackColor};
  scrollbar-width: thin;
  width: 300px;
  z-index: ${ZIndex.MenuBar};

  ::-webkit-scrollbar {
    appearance: none;
    width: ${trackWidth}px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: ${thumbColor};
    border-radius: 3px;
  }
`;

export const StyledMenu = styled.ul`
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
`;

export const StyledNavHeader = styled.header`
  padding: 24px 24px 16px;
`;