import css from 'styled-jsx/css'

export const dragHandle = css`
  div {
    width: 20px;
    height: 15px;
    user-select: none;
    cursor: row-resize;
    align-items: center;
    background: linear-gradient(
      top,
      #0006,
      #0006 20%,
      #fff0 0,
      #fff0 40%,
      #0006 0,
      #0006 60%,
      #fff0 0,
      #fff0 80%,
      #0006 0,
      #0006
    );
    background: -webkit-linear-gradient(
      top,
      #0006,
      #0006 20%,
      #fff0 0,
      #fff0 40%,
      #0006 0,
      #0006 60%,
      #fff0 0,
      #fff0 80%,
      #0006 0,
      #0006
    );
  }
`

export const sortableItem = css`
  li {
    display: grid;
    grid-template-columns: 30px 1fr;
  }
`

export const sortableList = css`
  ul {
    padding: 0;
  }
`
