import styled from 'styled-components';

export const ImageContainer = styled.div<any>`
   ${(p) => p.disabled && 'opacity: 0.3;'}
   margin: 5px;
   box-shadow: 0 0 0 1px rgb(63 63 68 / 5%), 0 1px 3px 0 rgb(34 33 81 / 15%);
   position: relative;
   overflow: hidden;

   .cover {
      width: 140px;
      height: 140px;
      background-color: black;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
   }

   .icon-close,
   .icon-rotate-left,
   .icon-rotate-right {
      position: absolute;
      background: black;
      color: white;
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      text-align: center;
      border-radius: 100px;
   }

   .icon-rotate-left {
      left: 5px;
      bottom: 5px;
   }

   .icon-rotate-right {
      left: 40px;
      bottom: 5px;
   }

   .icon-close {
      right: 5px;
      top: 5px;
   }

   .item {
      position: relative;
      display: flex;
      flex-grow: 1;
      align-items: center;
      border: 2px solid black;
      outline: none;
      box-sizing: border-box;
      list-style: none;
      transform-origin: 50% 50%;

      -webkit-tap-highlight-color: transparent;

      color: $text-color;
      font-weight: $font-weight;
      font-size: 1rem;
      white-space: nowrap;

      transform: scale(var(--scale, 1));
      transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);

      &:focus-visible {
         box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;
      }

      &:not(.withHandle) {
         touch-action: none;
         user-select: none;
         -webkit-user-select: none;
         cursor: grab;
      }

      &.dragging:not(.dragOverlay) {
         border: 2px dashed red;

         .cover {
            opacity: 0;
         }

         &:focus {
            box-shadow: $box-shadow;
         }
      }

      &.disabled {
         color: #999;
         background-color: #f1f1f1;
         &:focus {
            box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;
         }
         cursor: not-allowed;
      }

      &.dragOverlay {
         cursor: inherit;
         /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
         animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
         transform: scale(var(--scale));
         box-shadow: var(--box-shadow-picked-up);
         opacity: 1;
      }

      &.color:before {
         content: '';
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 0;
         height: 100%;
         width: 3px;
         display: block;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         background-color: var(--color);
      }

      &:hover {
         .Remove {
            visibility: visible;
         }
      }
   }
`;
