@use "/src/assets/scss/partial" as *;
@use "/src/assets/scss/variables" as *;

.HomeVarietiesCardWrap {
  &:hover {
    .LinkArrow {
      transform: rotate(45deg);
      background-color: $primaryColor;
    }
  }
  .LinkArrow {
    transition: 0.3s all;
    &::before {
      mask-size: contain;
      mask-image: url("../../../public/images/icon-right-arrow.svg");
      -webkit-mask-image: url("../../../public/images/icon-right-arrow.svg");
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      transition: all 0.3s ease-in-out;
      background-color: $whiteColor;
    }
  }
  .HomeVarietiesCardContent {
    position: relative;
    z-index: 0;
    background-color: $whiteColor;
    --r: 25px; /* the radius */
    --s: 40px; /* size of inner curve */
    --x: -8px; /* horizontal offset (no percentage) */
    --y: -8px; /* vertical offset (no percentage) */
    border-radius: var(--r);
    --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
          72%);
    --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m),
      100% calc(var(--_d) + var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
      var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
    height: 100%;
    border-radius: 20px;
    border: 1px solid #bfbfbf;
    @media (min-width: $md) {
      border-radius: 25px;
    }
    @media (min-width: $xl) {
      --r: 31px;
      --s: 42px;
      --x: -8px;
      --y: -10px;
    }
    @media (min-width: $xxl) {
      --r: 29px;
      --s: 52px;
      --x: -14px;
      --y: -14px;
      border-radius: 30px;
    }
    @media (min-width: $xxxl) {
      --r: 40px;
      --s: 45px;
      --x: -11px;
      --y: -13px;
      border-radius: 40px;
    }
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      right: -2px;
      top: -5px;
      width: 90px;
      height: 90px;
      background-image: url("../../../public/images/card-pattern.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      @media (min-width: $xl) {
        width: 102px;
        height: 102px;
      }
      @media (min-width: $xxl) {
        width: 104px;
        height: 104px;
        right: -3px;
        top: -4px;
      }
      @media (min-width: $xxxl) {
        width: 120px;
        height: 120px;
      }
    }
  }
}