import { styled } from 'view-container'

// private
const leftRightStyles = styled.css `
  top: 0;
  bottom: 0;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
`
const topBottomStyles = styled.css `
  left: auto;
  right: auto;
`
const topRightStyles = styled.css `
  left: auto;
  right: 1rem;
  top: 2rem;
`

export const StylehSidebarItem = styled.aside `
  position: fixed;
  will-change: transform;

  background-color: peachpuff;
  color: papayawhip;

  ${props =>
    props.position === 'left' &&
    styled.css `
      ${leftRightStyles};
    `};

  ${props =>
    props.position === 'right' &&
    styled.css `
      ${leftRightStyles};
    `};

  ${props =>
    props.position === 'top' &&
    styled.css `
      ${topBottomStyles};
    `};

  ${props =>
    props.position === 'topRight' &&
    styled.css `
      ${topRightStyles};
    `};

  ${props =>
    props.position === 'bottom' &&
    styled.css `
      ${topBottomStyles};
    `};
`