@theme {
  --logo-original: url("../../images/logo.svg");
  --logo-text: url("../../images/logo-fullText.svg");
  --logo-engText: url("../../images/logo-fullText-eng.svg");
  --logo-engHorizon: url("../../images/logo-eng-horizon.svg");
  --logo-white-original: url("../../images/logo-white.svg");
  --logo-white-text: url("../../images/logo-fullText-white.svg");
  --logo-white-engText: url("../../images/logo-fullText-eng-white.svg");
  --logo-white-engHorizon: url("../../images/logo-eng-horizon-white.svg");
  --logo-solid-original: url("../../images/logo-solid.svg");
  --logo-original-ratio: 300/225;
  --logo-text-ratio: 1/1;
  --logo-engText-ratio: 1/1;
  --logo-engHorizon-ratio: 1100/200;
  --logo-original-width: 300px;
  --logo-text-width: 300px;
  --logo-engText-width: 300px;
  --logo-engHorizon-width: 1100px;
}

@utility logo-* {
  & {
    @apply inline-block;

    width: var(--logo-width, --value(--logo- * -width));
    max-width: 100%;
    height: var(--logo-height, auto);
    aspect-ratio: --value(--logo- * -ratio);
    background: --value(--logo- *) 0 0 / 100% no-repeat;
  }
}

@utility logo-white-* {
  & {
    @apply inline-block;

    width: var(--logo-width, --value(--logo- * -width));
    max-width: 100%;
    height: var(--logo-height, auto);
    aspect-ratio: --value(--logo- * -ratio);
    background: --value(--logo- *) 0 0 / 100% no-repeat;
  }
}

@utility logo-solid-* {
  & {
    @apply inline-block;

    width: var(--logo-width, --value(--logo- * -width));
    max-width: 100%;
    height: var(--logo-height, auto);
    aspect-ratio: --value(--logo- * -ratio);
    background: --value(--logo- *) 0 0 / 100% no-repeat;
  }
}