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

.branding-block {
  svg {
    --svg--height: #{ site-config.$site-brand-logo-size };
    --svg--path--fill: var(--highlight-color);
    --svg--rect--stroke: var(--highlight-color);
  }

  &__logo-group {
    display: grid;
  }

  &__brand-logo {
    opacity: 0;
    // On mobile force the brand logo to size of the mini logo. This ensures
    // there will be no jumping of content when scrolling.
    height: site-config.$site-mini-logo-size;
    grid-column: 1;
    grid-row: 1;
    transition: all 200ms ease-in-out;
    width: 0;
    pointer-events: none;
  }

  &__mini-logo {
    display: flex;
    gap: 0.25em;
    grid-column: 1;
    grid-row: 1;
    opacity: 1;
    height: site-config.$site-mini-logo-size;
    transition: all 200ms ease-in-out;
    place-self: center;

    &-square,
    &-circle {
      background-color: var(--highlight-color);
      aspect-ratio: 1;
      display: inline-block;
      transition: border-radius 200ms ease-in-out;
    }

    &-circle {
      border-radius: 100%;
    }
  }

  a {
    &:hover,
    &:focus-visible {
      .branding-block__mini-logo-square {
        border-radius: 100%;
      }

      .branding-block__mini-logo-circle {
        border-radius: 0;
      }
    }
  }

  // not mobile
  @media (width > site-config.$small-header-mq) {
    &__brand-logo {
      opacity: 1;
      height: site-config.$site-brand-logo-size;
      width: auto;
      pointer-events: all;
    }

    &__mini-logo {
      opacity: 0;
    }

    [data-site-header-small] & {
      &__brand-logo {
        pointer-events: none;
        opacity: 0;
        width: 0;
        // When scrolling past a threshold force the brand logo to size of the
        // mini logo. This ensures there will be no jumping of content when
        // scrolling.
        height: site-config.$site-mini-logo-size;
      }

      &__mini-logo {
        opacity: 1;
      }
    }
  }
}
