// 3rd party.
import classnames from 'classnames';
import React from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';

const decorate = compose(
  contempo(`
.item-slot {
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    -.5px -.5px 0 rgba(0, 0, 0, 1),
    .5px .5px 0 rgba(0, 0, 0, 1),
    -.5px .5px 0 rgba(0, 0, 0, 1),
    .5px -.5px 0 rgba(0, 0, 0, 1)
  ;
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 2px;
  background-color: rgba(255, 255, 255, .2);
  transition: box-shadow 0.125s;
}
.item-slot:hover {
  box-shadow:
    -.5px -.5px 0 rgba(0, 0, 0, 1),
    .5px .5px 0 rgba(0, 0, 0, 1),
    -.5px .5px 0 rgba(0, 0, 0, 1),
    .5px -.5px 0 rgba(0, 0, 0, 1),
    -.5px -.5px 3px rgba(255, 255, 255, 1),
    .5px .5px 3px rgba(255, 255, 255, 1),
    -.5px .5px 3px rgba(255, 255, 255, 1),
    .5px -.5px 3px rgba(255, 255, 255, 1)
  ;
}
  `),
);

const ItemSlotComponent = (props) => {
  const {children, className} = props;
  return <div
    {...props}
    className={classnames(
      'item-slot',
      'unselectable',
      className,
    )}
  >{children}</div>;
}

export default decorate(ItemSlotComponent);