@use 'apps/dashboard/src/variables' as *;
@use '../../edit-resource.tokens' as tokens;

.resource-thumbnail-container {
  align-items: center;
  background: $color-neutral-lightest;
  display: flex;
  height: tokens.$thumbnail-height;
  justify-content: center;
  position: relative;
  width: tokens.$thumbnail-width;

  img {
    max-height: calc(#{tokens.$thumbnail-height} - #{rhythm(0.25)});
    max-width: calc(#{tokens.$thumbnail-width} - #{rhythm(0.25)});
  }

  &.selected {
    border: 1px solid $color-neutral-regular;
  }
  &:not(.selected):not(.disabled) {
    cursor: pointer;
  }

  .delete-thumbnail {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity $transition-hint;
  }

  &:hover .delete-thumbnail,
  &:focus .delete-thumbnail,
  &:focus-within .delete-thumbnail {
    opacity: 1;
  }
}
