pre.shiki {
  margin-block: var(--lg);
}

:where(p, li):has(> code) code {
  padding-inline: var(--sm);
  border-radius: var(--radius-xs);
  color: hsl(var(--blue) 100 69);
  background-color: hsla(var(--blue) 85 35 / 0.1);
}

.shiki,
.shiki span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

html.dark .shiki,
html.dark .shiki span,
html:has(input#theme-manual-toggle:checked) .shiki,
html:has(input#theme-manual-toggle:checked) .shiki span {
  color: var(--shiki-dark);
  background-color: var(--shiki-dark-bg);
}

pre {
  padding: 1rem;
  border-radius: 0.618rem;
  overflow: hidden;
  text-wrap: wrap;
  transition:
    background-color var(--theme-transition),
    color var(--theme-transition);

  & .copy-button {
    all: unset;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.618rem;
    font-weight: 500;
    border-radius: 0.272rem;
    padding: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsla(var(--blue) 100 69 / 0.33);
    background-color: hsla(var(--blue) 85 35 / 0.01);
    cursor: pointer;
    transition:
      background-color var(--theme-transition),
      color var(--theme-transition);
    z-index: 10;

    & svg {
      position: absolute;
      transition:
        transform 0.3s var(--ease-in-out),
        opacity 0.3s var(--ease-in-out);
    }

    & .check-icon {
      opacity: 0;
      transform: scale(0.5);
      color: hsl(var(--green) 100 69);
    }

    &:hover {
      color: hsla(var(--blue) 100 75 / 0.75);
      background-color: hsla(var(--blue) 85 35 / 0.1);
    }

    &.copied {
      & .copy-icon {
        opacity: 0;
        transform: scale(0.5);
      }

      & .check-icon {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  &.shiki {
    box-shadow: var(--shadow-md);

    &:hover .copy-button {
      transition: background-color var(--theme-transition);
      background-color: hsla(var(--blue) 85 35 / 0.07);
    }
  }
}