import { Positions } from './../../styles/theme-provider/index';
import styled from 'styled-components';
import * as React from 'react';

export const StyledSideBar = styled.div<{anchor: Positions}>` 
    background: #37393a;
    color: #fff;
    position: fixed;
    padding: 10px;
    overflow-y: auto;
    word-break: break-word;
    overflow-x: hidden;
    z-index: 999999;

    ${props => props.anchor === 'top' && `
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
    `}

    ${props => props.anchor === 'left' && `
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh;
    `}

    ${props => props.anchor === 'right' && `
        top: 0;
        right: 0;
        width: 200px;
        height: 100vh;
    `}

    ${props => props.anchor === 'bottom' && `
        bottom: 0;
        left: 0;
        right: 0;
        height: 200px;
    `}
`;

export const StyledHeader = styled.div`
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
`;