.mykn-logo {
  display: inline-block;
  font-size: 0;
  height: 34px;
  max-width: 100%;

  &--abbreviated {
    height: auto;
  }

  &--variant-contrast {
    --page-color-logo: var(--logo-background);
  }

  & &__handle {
    transition: transform var(--animation-duration-fast)
      var(--animation-timing-function);
  }

  &__image {
    height: 100%;
    object-fit: contain;
    overflow: visible;
    width: 100%;
  }

  &[href]:hover &__handle--left,
  &[href]:focus &__handle--left {
    transform: translateX(-2px);
  }

  &[href]:active &__handle--left {
    transform: translateX(2px);
  }

  &[href]:hover &__handle--right,
  &[href]:focus &__handle--right {
    transform: translateX(2px);
  }

  &[href]:active &__handle--right {
    transform: translateX(-2px);
  }

  &--abbreviated &__text--a,
  &--abbreviated &__text--y,
  &--abbreviated &__text--k,
  &--abbreviated &__text--i,
  &--abbreviated &__text--n {
    opacity: 0;
  }
}