.product-card {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-4);

  inline-size: 40rem;

  @include media-down(tablet-xs) {
    inline-size: 30rem;
  }

  @include media-down(mobile-m) {
    inline-size: 25rem;
  }

  &__thumbnail-wrapper {
    @include size(30rem, 100%);

    position: relative;

    &:hover {
      #{$block}__add-button-wrapper {
        @media (hover: hover) {
          block-size: auto;
        }
      }
    }

    @include media-down(tablet-xs) {
      block-size: 20rem;
    }

    @include media-down(mobile-m) {
      block-size: 15rem;
    }
  }

  &__thumbnail {
    @include size(100%, 100%);

    object-fit: cover;
    object-position: center;
  }

  &__add-button-wrapper {
    @include position(absolute, auto, auto, 0, 0);
    @include size(0, 100%);

    overflow: hidden;

    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.15s;
    }

    @include media-down(laptop) {
      block-size: auto;
    }
  }

  &__button-wrapper {
    @include flex(row, nowrap, $whitespace-5, center, space-between);

    padding: 0 $whitespace-7 $whitespace-4;
  }

  &__body {
    @include flex(column, nowrap, $whitespace-2);
  }

  &__name {
    font-size: $font-size-5;
    color: $color-neutral-9;
  }

  &__price-container {
    @include flex(row, nowrap, $whitespace-4, flex-start);
  }

  &__final-price {
    font-size: $font-size-4;
    font-weight: $font-weight-bold;
    color: $color-neutral-10;

    &--accent {
      color: $color-accent-7;
    }
  }

  &__initial-price {
    font-size: $font-size-3;
    color: $color-neutral-7;
  }

  &__color-switch-list {
    @include remove-list-styles;
    @include position(absolute, 0, 0);
    @include flex(row, nowrap, $whitespace-3, center);
  }

  &__color-switch {
    @include remove-button-styles;
    @include size(2rem, 2rem);

    position: relative;

    &--selected {
      position: relative;

      &::after {
        @include position(absolute, auto, 0, 0, auto);
        @include flex(row, nowrap, null, center, center);
        @include size(1.5rem, 1.5rem);

        z-index: 997;
        font-size: $font-size-2;
        color: $color-accent-10;
        content: "\2713";
        background-color: $color-neutral-1;
        border: 0.1rem solid $color-neutral-10;
      }
    }
  }

  &__color-switch-image {
    @include size(100%, 100%);

    object-fit: cover;
    object-position: center;
  }

  &__loader {
    @include size(2.5rem, 2.5rem);
  }

  &__quantity {
    color: $color-neutral-1;
    text-shadow:
      -0.1rem -0.1rem 0 $color-neutral-10,
      0.1rem -0.1rem 0 $color-neutral-10,
      -0.1rem 0.1rem 0 $color-neutral-10,
      0.1rem 0.1rem 0 $color-neutral-10,
      0 -0.1rem 0 $color-neutral-10,
      0 0.1rem 0 $color-neutral-10,
      -0.1rem 0 0 $color-neutral-10,
      0.1rem 0 0 $color-neutral-10;
    stroke: $color-neutral-10;
    stroke-width: 0.1rem;
    paint-order: stroke fill;
  }
}