import styled from 'styled-components';

export const StyledControlGroup = styled.div`
  opacity: 1;
  position: relative;
  margin: 8px;
  padding: 5px;
  background: ${props => props.theme.controlBackgroundColor};
  color: ${props => props.theme.controlColor};
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 1px 2px 5px #757575;
  display: flex;
  flex-direction: ${props => props.orientation === 'vertical' ? 'column' : 'row'};
  align-items: center;
  justify-content: center;

  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  &:hover {
    opacity: 1;
  }
`;

export const StyledToolBar = styled.div`
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position: absolute;
  left: ${p => p.position.includes('left') ? p.sideBarMargin : 'unset'};
  right: ${p => p.position.includes('right') ? '0px' : 'unset'};
  bottom: ${p => p.position.includes('bottom') ? '0px' : 'unset'};
  top: ${p => p.position.includes('top') ? '0px' : 'unset'};
  z-index: 95;
  border-radius: 15px;
  display: flex;
  flex-direction: ${props => props.orientation === 'vertical' ? 'column' : 'row'};
  align-items: center;
  justify-content: center;
`;

export const VerticalIconSeparator = styled.div`
  width: 20px;
  background: rgb(211, 211, 211);
  height: 1px;
`;

export const HorizontalIconSeparator = styled.div`
    && {
        width: 1px;
        background: rgb(211, 211, 211);
        height: 20px;
    }
`;


