// 3rd party.
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);
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 2px;
  background-color: rgba(255, 255, 255, .2);
}
  `),
);

const ItemSlotComponent = ({children}) => {
  return <div className="item-slot unselectable">{children}</div>;
}

export default decorate(ItemSlotComponent);