$border-radius: var(
  --wds-thumbnail-border-radius,
  var(--wds-border-radius-400)
);
$border-width: var(
  --wds-thumbnail-border-width-default,
  var(--wds-border-width-100, 1px)
);
$inner-shadow: var(--wds-shadow-x-input, 0px) var(--wds-shadow-y-input, 0px)
  var(--wds-shadow-blur-input, 0px) 0 var(--wds-shadow-fill-input, transparent)
  inset;
$border-color: var(
  --wds-thumbnail-border-color,
  var(--wds-color-border-dark-secondary)
);
$border-color-hover: var(
  --wds-color-border-standard-secondary-hover,
  var(--wsr-color-B20, #5999ff)
);
$border-color-selected: var(
  --wds-color-border-standard-secondary-active,
  var(--wsr-color-B10, #116dff)
);
$border-color-disabled: var(
  --wds-color-border-standard-secondary-disabled,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);
$selection-duration: 500ms;
$selection-easing: cubic-bezier(0, 0, 0.25, 1);
$selection-fade-duration: 150ms;
$badge-fade-duration: 120ms;
$badge-rise-duration: 240ms;
$badge-delay: 200ms;
$badge-icon-delay: $badge-delay + 80ms;
$selected-image-scale: 1.14;
$badge-rise-offset: 10px;
$badge-icon-rise-offset: 6px;

.thumbnail {
  & &__wrapper {
    border-radius: $border-radius;
  }

  & &__wrapper::after {
    box-shadow: 0 0 0 $border-width $border-color inset;
    border-radius: $border-radius;
  }

  @media (hover: hover) {
    &__wrapper:hover::after {
      box-shadow: 0 0 0 $border-width $border-color-hover inset;
    }
  }

  & &__wrapper:focus-visible::before {
    border-radius: $border-radius;
  }

  &--selected &__wrapper::after {
    box-shadow: 0 0 0 2px $border-color-selected inset;
  }

  &--selected#{&}--disabled &__wrapper::after {
    box-shadow: 0 0 0 2px $border-color-disabled inset;
  }

  &--disabled &__wrapper::after {
    box-shadow: 0 0 0 $border-width $border-color-disabled inset;
  }

  &#{&}--disabled &__selected-icon {
    background:
      linear-gradient(
        0deg,
        var(--wds-thumbnail-checkmark-disabled, var(--wds-color-black-550)) 0%,
        var(--wds-thumbnail-checkmark-disabled, var(--wds-color-black-550)) 100%
      ),
      var(
        --wds-thumbnail-fill,
        var(--wds-color-white-transparent-0, rgba(255, 255, 255, 0))
      );
  }

  @media (hover: hover) {
    &#{&}--skin-secondary#{&}--text-position-outside &__wrapper:hover::after {
      box-shadow:
        0 0 0 $border-width $border-color-hover inset,
        $inner-shadow;
    }
  }

  &#{&}--skin-secondary#{&}--text-position-outside#{&}--selected
    &__wrapper::after {
    box-shadow:
      0 0 0 2px $border-color-selected inset,
      $inner-shadow;
  }

  &#{&}--skin-secondary#{&}--text-position-outside#{&}--disabled
    &__wrapper::after {
    box-shadow:
      0 0 0 $border-width $border-color-disabled inset,
      $inner-shadow;
  }

  &#{&}--skin-secondary#{&}--text-position-outside#{&}--selected#{&}--disabled
    &__wrapper::after {
    box-shadow:
      0 0 0 2px $border-color-disabled inset,
      $inner-shadow;
  }

  & &__custom-child {
    border-radius: $border-radius;
  }

  &#{&}--size-tiny &__text-content &__description {
    line-height: var(
      --wds-thumbnail-subtitle-font-line-height-tiny,
      var(--wds-font-line-height-body-tiny)
    );
  }

  & &__image {
    border-radius: $border-radius;
  }

  & &__background-image {
    border-radius: $border-radius;
  }

  & &__selected-icon {
    background: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }

  &:not(#{&}--border) &__wrapper::after,
  &:not(#{&}--border)#{&}--selected#{&}--disabled &__wrapper::after {
    box-shadow: none;
  }

  @media (hover: hover) {
    &--text-position-outside:not(#{&}--disabled):hover
      &__image-container::after,
    &--text-position-inside:not(#{&}--disabled):hover &__wrapper::before {
      background: linear-gradient(
        0deg,
        var(--wds-thumbnail-overlay-fill, var(--wds-color-white-transparent-0))
          0%,
        var(--wds-thumbnail-overlay-fill, var(--wds-color-white-transparent-0))
          100%
      );
      border-radius: $border-radius;
    }
  }

  @container style(--wds-internal-theme: odeditor) {
    & &__wrapper::after {
      transition: box-shadow $selection-fade-duration $selection-easing;
    }

    & &__image-container,
    & &__background-container {
      border-radius: $border-radius;
      overflow: hidden;
    }

    &--text-position-inside &__image-container {
      padding-bottom: 0;
      margin-bottom: 12px;
    }

    &--text-position-inside &__image-container:last-child {
      margin-bottom: 0;
    }

    & &__image-container > *,
    & &__background-container > * {
      transition: transform $selection-duration $selection-easing;
    }

    &--selected &__image-container > *,
    &--selected &__background-container > * {
      transform: scale($selected-image-scale);
    }

    @supports (transition-behavior: allow-discrete) {
      & &__selected-icon {
        transition:
          opacity $badge-fade-duration $selection-easing $badge-delay,
          transform $badge-rise-duration $selection-easing $badge-delay;
      }

      & &__selected-icon > * {
        transition:
          opacity $badge-fade-duration $selection-easing $badge-icon-delay,
          transform $badge-rise-duration $selection-easing $badge-icon-delay;
      }

      @starting-style {
        & &__selected-icon {
          opacity: 0;
          transform: translateY($badge-rise-offset);
        }

        & &__selected-icon > * {
          opacity: 0;
          transform: translateY($badge-icon-rise-offset);
        }
      }
    }

    @media (prefers-reduced-motion) {
      & &__wrapper::after,
      & &__image-container > *,
      & &__background-container > *,
      & &__selected-icon,
      & &__selected-icon > * {
        transition: none;
      }

      &--selected &__image-container > *,
      &--selected &__background-container > * {
        transform: none;
      }
    }
  }
}