DocSpace-client/packages/asc-web-common/components/MediaViewer/sub-components/scroll-button.js

import { Base } from '@appserver/components/themes';
import React from 'react';
import styled from 'styled-components';

const ScrollButton = styled.div`
  cursor: ${(props) => (props.inactive ? 'default' : 'pointer')};
  opacity: ${(props) => (props.inactive ? '0.2' : '1')};
  z-index: 305;
  position: fixed;
  top: calc(50% - 20px);

  background: none;

  ${(props) => (props.orientation != 'left' ? 'left: 20px;' : 'right: 20px;')}

  width: 40px;
  height: 40px;
  background-color: ${(props) => props.theme.mediaViewer.scrollButton.backgroundColor};
  border-radius: 50%;

  &:hover {
    background-color: ${(props) =>
      !props.inactive && props.theme.mediaViewer.scrollButton.background};
  }

  &:before {
    content: '';
    top: 12px;
    left: ${(props) => (props.orientation == 'left' ? '9px;' : '15px;')};
    position: absolute;
    border: ${(props) => props.theme.mediaViewer.scrollButton.border};
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 7px;
    transform: ${(props) => (props.orientation == 'left' ? 'rotate(-45deg)' : 'rotate(135deg)')};
    -webkit-transform: ${(props) =>
      props.orientation == 'left' ? 'rotate(-45deg)' : 'rotate(135deg)'};
  }
`;

ScrollButton.defaultProps = { theme: Base };

const MediaScrollButton = (props) => {
  return <ScrollButton {...props} />;
};

export default MediaScrollButton;