import styled from 'styled-components';
import { REM_UNIT_XSM, CHARLESTON_GREEN, ISABELLINE } from '@vincent_za/styles';
import { TriggerTemplate, CLASSNAME_TRIGGER_TEMPLATE_ICON } from '../../Modal';

import { STYLE_CONTROLS_WIDTH } from './constants';

export const Controls = styled.div`
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: ${REM_UNIT_XSM} 0;
  width: ${STYLE_CONTROLS_WIDTH};
  background-color: ${CHARLESTON_GREEN};
`;

export const Control = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${STYLE_CONTROLS_WIDTH};
  height: ${STYLE_CONTROLS_WIDTH};
  cursor: pointer;

  ${props => props.isDisabled && `
    pointer-events: none;
    opacity: 0.4;
  `};
`;

export const PageControlTriggerTemplate = styled(TriggerTemplate)`
  cursor: pointer;
  width: ${STYLE_CONTROLS_WIDTH};
  height: ${STYLE_CONTROLS_WIDTH};

  .${CLASSNAME_TRIGGER_TEMPLATE_ICON} {
    width: 14px;
    height: 14px;
  };

  &:hover {
    .${CLASSNAME_TRIGGER_TEMPLATE_ICON} {
      fill: ${ISABELLINE};
    };
  };
`;
