@use "_theme.scss";

.draft-item-thumbnail {
  width: 90px;
  max-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;

  @media (max-width: theme.$sm) {
    width: 80px;
    height: 80px;
  }

  &:hover:not(.disabled) {
    .thumbnail-image {
      border-color: var(--color-highlight);
    }
  }

  &:focus:not(.disabled) {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .thumbnail-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--color-line);
    background: var(--color-fill);

    &.disabled {
      cursor: default;
    }

    &.hide {
      display: none;
    }
  }


  .skeleton {
    --base-color: var(--skeleton-base-color);
    --highlight-color: var(--skeleton-highlight-color);
  }
}
