$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))
);

.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-black-100-transparent-10)
          )
          0%,
        var(
            --wds-thumbnail-overlay-fill,
            var(--wds-color-black-100-transparent-10)
          )
          100%
      );
      border-radius: $border-radius;
    }
  }
}