$border-radius: var(
  --wds-thumbnail-border-radius,
  var(--wds-border-radius-600)
);
$border-width: var(--wds-thumbnail-border-width-default, 0px);
$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))
);
$fill: var(--wds-thumbnail-fill, var(--wds-color-fill-standard-secondary));

.thumbnail {
  & &__wrapper {
    background-color: $fill;
    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;
    }

    &:not(#{&}--disabled) &__wrapper:hover {
      background-color: var(
        --wds-thumbnail-fill-hover,
        var(--wds-color-fill-standard-secondary-hover)
      );
    }
  }

  & &__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-fill-standard-primary-disabled, #dedede)
          )
          0%,
        var(
            --wds-thumbnail-checkmark-disabled,
            var(--wds-color-fill-standard-primary-disabled, #dedede)
          )
          100%
      ),
      $fill;
  }

  &--has-children &__wrapper {
    background-color: $fill;
  }

  &--skin-secondary &__wrapper {
    background-color: var(--wds-color-black-750, #f8f6f6);
  }

  @media (hover: hover) {
    &--skin-secondary:not(#{&}--disabled) &__wrapper:hover {
      background-color: var(--wds-color-black-750, #f8f6f6);
    }

    &#{&}--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;
  }

  &--text-position-outside &__text-content {
    margin-top: var(--wds-thumbnail-title-padding-top, var(--wds-space-150));
  }

  &:not(#{&}--disabled) &__text-content &__description {
    color: var(
      --wds-thumbnail-subtitle-fill,
      var(--wds-color-text-standard-secondary-light)
    );
  }

  &#{&}--size-tiny &__text-content &__description {
    font-size: var(
      --wds-thumbnail-subtitle-font-size-tiny,
      var(--wds-font-size-body-extra-tiny)
    );
    line-height: var(
      --wds-thumbnail-subtitle-font-line-height-tiny,
      var(--wds-font-line-height-body-extra-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-black-100-transparent-10)
          )
          0%,
        var(
            --wds-thumbnail-overlay-fill,
            var(--wds-color-black-100-transparent-10)
          )
          100%
      );
      border-radius: $border-radius;
    }
  }
}