/* Normal colors */
:root {
  --md-heart: #{$clr-red-a200};
  --md-heart-big: #{$clr-red-a400};

  /* Dark mode colors */
  [data-md-color-scheme="dracula"] {
    --md-heart: #{$drac-pink};
    --md-heart-big: #{$drac-red};
  }
}

.md-typeset {
    a.source-link {
        position: relative;
        top: px2rem(-12px);
        float: right;
        color: var(--md-default-fg-color--lighter);
        transition: color 125ms;

        &:hover {
          color: var(--md-accent-fg-color);
        }

        .twemoji {
            height: px2rem(24px);

            svg {
                width: px2rem(24px);
                height: px2rem(24px);
            }
        }
    }

    div.highlight.md-max-height pre > code {
      max-height: px2rem(300px);
    }
}

.twemoji {
  &.heart-throb, &.heart-throb-hover {
    svg {
      position: relative;
      color: var(--md-heart);
      animation: pulse 1.5s ease infinite;
    }
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  40% { color: var(--md-heart-big); transform: scale(1.3); }
  50% { transform: scale(1.2); }
  60% { color: var(--md-heart-big); transform: scale(1.3); }
  100% { transform: scale(1); }
}

footer.sponsorship {
  text-align: center;

  hr {
    display: inline-block;
    width: px2rem(32px);
    margin: 0 px2rem(14px);
    vertical-align: middle;
    border-bottom: 2px solid var(--md-default-fg-color--lighter);
  }

  &:hover {
    hr {
        border-color: var(--md-accent-fg-color);
    }
  }

  &:not(:hover) {
    .twemoji.heart-throb-hover svg{
        color: var(--md-default-fg-color--lighter) !important;
    }
  }
}

// Scheme toggle
body {
  &:not([data-md-prefers-color-scheme="true"])[data-md-color-scheme="dracula"] .md-icon {
    .light-mode,
    .system-mode,
    .unknown-mode {
      display:  none;
    }
  }


  &:not([data-md-prefers-color-scheme="true"])[data-md-color-scheme="default"] .md-icon {
    .dark-mode,
    .system-mode,
    .unknown-mode {
      display:  none;
    }
  }

  &:not([data-md-prefers-color-scheme="true"]):not([data-md-color-scheme="default"]):not([data-md-color-scheme="dracula"]) .md-icon {
    .dark-mode,
    .light-mode,
    .system-mode {
      display:  none;
    }
  }

  &[data-md-prefers-color-scheme="true"] .md-icon {
    .dark-mode,
    .light-mode,
    .unknown-mode {
      display: none;
    }
  }
}

.md-header-nav__scheme {
  z-index: 0;
}

@include break-to-device(tablet portrait) {
  .md-header-nav__scheme {
    padding-right: 0;
  }

  label[for="__search"] {
    padding-left: 0;
  }
}

[data-md-toggle=search]:checked~.md-header .md-header-nav__scheme {
  display: none;
}
