.make-social-media-card-intent(@colors) {
  &.cr-ct-social-media-card--light {
    color: @colors[color-10] !important;
    border: 1px solid @colors[color-10] !important;
    .cr-ct-social-media-card__icon {
      color: @colors[color-10] !important;
    }
  }

  &.cr-ct-social-media-card--dark {
    color: @colors[color-99] !important;
    border: 1px solid @colors[color-99] !important;
    .cr-ct-social-media-card__icon {
      color: @colors[color-99] !important;
    }
  }
}

.cr-ct-social-media-card {
  border: 1px solid @theme-secondary-base-color;
  padding: 12px 28px;
  color: @theme-secondary-base-color;
  width: fit-content;
  max-width: 100%;

  a {
    &:hover {
      color: @theme-secondary-color-40;
    }
  }

  &__bookings {
    font-size: 16px;
    &--mobile {
      font-size: 14px;
    }
  }

  &__number-of-bookings {
    font-weight: 700;
  }

  &--disable-paddings {
    padding: 0 !important;
    border: none !important;
  }

  &__icon {
    font-size: 24px;
    color: @theme-secondary-base-color;
    display: flex;
    align-items: center;
    justify-content: center;

    &--mobile {
      font-size: 20px;
    }
  }

  &__icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }

  &--theme-1 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-1][@colors]);
    }
  }

  &--theme-2 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-2][@colors]);
    }
  }

  &--theme-3 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-3][@colors]);
    }
  }

  &--theme-4 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-4][@colors]);
    }
  }

  &--theme-5 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-5][@colors]);
    }
  }

  &--theme-6 {
    &.cr-ct-social-media-card--primary {
      .make-social-media-card-intent(@themes[@theme-6][@colors]);
    }
  }

  &--default {
    .make-social-media-card-intent(@themes[@secondary][@colors]);
  }

  &--font-variant-1 {
    font-family: @theme-font-variants[@variant-1][body-font-family];
  }

  &--font-variant-2 {
    font-family: @theme-font-variants[@variant-2][body-font-family];
  }

  &--font-variant-3 {
    font-family: @theme-font-variants[@variant-3][body-font-family];
  }
}