@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.client-logo {
  [data-site-mode="at-work"] & {
    img {
      filter: brightness(0) invert(1);
    }
  }

  [data-site-mode="at-play"] & {
    img {
      // This is combination is the closet to get to $oxblood.
      filter:
        brightness(0)
        saturate(100%)
        invert(8%)
        sepia(82%)
        saturate(5700%)
        hue-rotate(38deg)
        brightness(85%)
        contrast(108%);
      }
  }

  &__name {
    --h3--font-size: var(--client-logo--name--font-size);
    @extend %text-style-h3;
  }
}
