import styled from 'styled-components/macro';

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

export const StyledWrapper = styled.aside`
  height: 100vh;
  position: relative;
  width: 86px;
`;

export const StyledPanel = styled.nav`
  background: ${color('sys/color/white')};
  box-shadow: 1px 0 0 ${color('sys/color/divider')};
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  scrollbar-color: ${thumbColor} ${trackColor};
  scrollbar-width: thin;
  width: 86px;
  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;
  flex-grow: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
`;

export const StyledDivider = styled.hr`
  border-top: 1px solid ${color('sys/color/divider')};
  margin: 23px 16px 16px;
`;