$border-radius: var(
  --wds-thumbnail-border-radius,
  var(--wds-border-radius-300, 6px)
);
$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-standard-secondary,
    color-mix(in srgb, var(--wsr-color-B00, #084ebd) 24%, transparent)
  )
);
$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-white-transparent-0, transparent)
);

.thumbnail {
  &:not(#{&}--disabled) {
    cursor: pointer;
  }

  &--disabled {
    cursor: default;
  }

  & &__wrapper {
    position: relative;
    display: flex;
    margin: 0 auto;
    padding: var(--wds-space-300, 18px);
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background: transparent;
    background-color: $fill;
    border: 0;
    border-radius: $border-radius;
    box-sizing: border-box;
    outline: none;
  }

  &--text-position-outside &__wrapper {
    position: relative;
    display: flex;
    padding: 0;
  }

  &--text-position-inside#{&}--size-tiny &__wrapper {
    padding: var(--wds-space-250, 15px);
  }

  &--text-position-inside#{&}--no-padding &__wrapper {
    padding: 0;
  }

  & &__wrapper::after {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 $border-width $border-color inset;
    border-radius: $border-radius;
    content: ' ';
  }

  @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-white-transparent-0)
      );
    }
  }

  & &__wrapper:focus-visible::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 3px
      var(--wds-color-blue-250, var(--wsr-color-F00, #a6d0ff));
    border-radius: $border-radius;
    content: ' ';
  }

  &--content-alignment-center &__wrapper {
    justify-content: center;
  }

  &--content-alignment-top &__wrapper {
    justify-content: flex-start;
  }

  &--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;
    cursor: default;
  }

  &--disabled &__image-container {
    opacity: 0.42;
  }

  &#{&}--disabled &__selected-icon {
    color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    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%
      ),
      var(
        --wds-thumbnail-fill,
        var(--wds-color-white-transparent-0, rgba(255, 255, 255, 0))
      );
  }

  &--has-children &__wrapper {
    padding: 0;
    align-items: stretch;
    background-color: var(
      --wds-thumbnail-fill,
      var(--wds-color-white-transparent-0, var(--wsr-color-D80, #ffffff))
    );
  }

  &--has-background &__wrapper,
  &--has-children &__wrapper {
    padding: 0;
  }

  &--skin-secondary &__wrapper {
    --wds-thumbnail-border-width-default: 0;
    box-shadow: $inner-shadow;
    background-color: var(--wds-color-black-750, #f8f6f6);
  }

  &--skin-secondary#{&}--disabled &__wrapper,
  &--skin-secondary#{&}--selected &__wrapper {
    --wds-thumbnail-border-width-default: 1px;
  }

  @media (hover: hover) {
    &--skin-secondary &__wrapper:hover {
      --wds-thumbnail-border-width-default: 1px;
    }

    &--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 {
    /* is required to make thumbnail border be always on top of custom child */
    overflow: auto;
    border-radius: $border-radius;
  }

  &--disabled &__custom-child {
    opacity: 0.3;
  }

  & &__content-container {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  &--text-position-outside &__content-container {
    height: 100%;
    width: 100%;
  }

  & &__text-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--wds-space-100, 6px);
  }

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

  &--text-position-outside#{&}--size-tiny &__text-content {
    gap: 0px;
  }

  &--text-position-outside#{&}--selected:not(#{&}--disabled) &__title {
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
  }

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

  &#{&}--size-tiny &__text-content &__description {
    font-size: var(
      --wds-thumbnail-subtitle-font-size-tiny,
      var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px))
    );
    line-height: var(
      --wds-thumbnail-subtitle-font-line-height-tiny,
      var(
        --wds-font-line-height-body-small,
        var(--wsr-text-line-height-tiny, 15px)
      )
    );
  }

  & &__title,
  & &__description,
  & &__image-container {
    word-break: break-word;
    text-align: center;
  }

  & &__title:last-child,
  & &__description:last-child,
  & &__image-container:last-child {
    padding: 0;
  }

  & &__bottom-title {
    text-align: center;
    padding-top: 6px;
  }

  &#{&}--selected &__bottom-title {
    color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
  }

  &#{&}--disabled &__bottom-title {
    color: var(
      --wds-color-black-100-transparent-30,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  & &__image-container {
    min-height: 0;
    min-width: 0;
    padding-bottom: 12px;
  }

  &--text-position-outside &__image-container {
    line-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  & &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: $border-radius;
  }

  & &__background-container {
    width: 100%;
    height: 100%;
    border-radius: $border-radius;
  }

  & &__background-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: $border-radius;
  }

  &--disabled &__background-image {
    opacity: 0.3;
  }

  & &__selected-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &: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 {
      pointer-events: none;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        0deg,
        var(
            --wds-thumbnail-overlay-fill,
            var(
              --wds-color-black-100-transparent-0,
              var(--wsr-color-D10-00, rgba(22, 45, 61, 0))
            )
          )
          0%,
        var(
            --wds-thumbnail-overlay-fill,
            var(
              --wds-color-black-100-transparent-0,
              var(--wsr-color-D10-00, rgba(22, 45, 61, 0))
            )
          )
          100%
      );
      border-radius: $border-radius;
    }
  }

  &:not(#{&}--border) &__selected-icon::after {
    /* To make the selected icon have a white border with opacity 0.3 on disabled
     * state and to maintain the same background on the selected icon, pseudo
     * element ::after needs to have a transparent background.
     */
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    background: transparent;
    border: 2px solid
      var(
        --wds-color-border-light-primary-active,
        var(--wsr-color-D80, #ffffff)
      );
  }

  &:not(#{&}--border)#{&}--disabled &__selected-icon::after {
    border: 2px solid
      var(
        --wds-color-border-light-primary-disabled,
        var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
      );
  }

  :global([dir='rtl']) & &__selected-icon {
    left: -10px;
    right: auto;
  }
}