import hexToRgba from 'hex-rgba';

export const LightboxTheme = {
  container: {
    background: `${hexToRgba('#ffffff', 95)}`
  },
  arrow: {
    'backgroundColor': 'rgba(255, 255, 255, 0.8)',
    'fill': '#000',
    'opacity': 0.6,
    'transition': 'opacity 200ms',
    ':hover': {
      opacity: 1
    }
  },
  arrow__size__medium: {
    'padding': '11px 0 11px 5px',
    'margin-top': 0,
    'transform': 'translateY(-50%)',
    'borderRadius': 40,
    '@media (min-width: 768px)': {
      height: 50,
      width: 50,
      padding: '11px 0'
    }
  },
  arrow__direction__left: {
    marginLeft: 10,
    paddingRight: '4px !important'
  },
  arrow__direction__right: {
    marginRight: 10,
    paddingLeft: '4px !important'
  },
  close: {
    'position': 'fixed',
    'fill': '#000',
    'opacity': 0.6,
    'transition': 'opacity .2s',
    'background': 'white',
    'right': '15px',
    'top': '15px',
    'margin': 0,
    'padding': '13px',
    'width': '50px',
    'height': '50px',
    ':hover': {
      opacity: 1
    }
  },
  footer: {
    color: 'black'
  },
  footerCount: {
    color: 'rgba(0, 0, 0, 0.6)'
  }
};