@use 'variables' as var;

pre {
  position: relative;

  &>code {
    display: block;
    overflow-x: auto;
    font-family: var.$mono-font;
    font-size: var.$code-font-size;
    line-height: 1.3;
    padding: 1em;

    border: .1em solid var(--quote-border);
  }

  &:hover .copy-button {
    visibility: visible;
    opacity: 1;
  }

  .copy-button {
    position: absolute;
    top: 0.3rem;
    right: 0;
    margin: 0 0.4rem;
    padding: 0.4rem;

    color: var(--sidebar-fg);
    background-color: var(--theme-popup-bg);

    border: 0.1rem solid var(--icons);
    border-radius: 0.4rem;

    opacity: 0;
    transition: opacity 300ms, color 300ms, border-color 300ms, background-color 300ms;

    cursor: pointer;

    &:hover {
      color: var(--sidebar-active);
      border-color: var(--icons-hover);
      background-color: var(--theme-hover);
    }

    .tooltiptext {
      position: absolute;
      top: -2.7em;
      left: 50%;
      transform: translateX(-50%);

      border-radius: 0.8rem;
      padding: 0.5em 1.2em;
      white-space: nowrap;
    }
  }
}

mark {
  color: inherit;
  background: linear-gradient(rgba(0, 0, 0, 0) 64%, var(--search-mark-bg));

  cursor: pointer;

  &:focus {
    outline: 2px solid var(--links);
    outline-offset: 2px;
  }
}

:popover-open {
  top: var.$menu-bar-height;

  color: var(--fg);
  background-color: var(--theme-popup-bg);
  border: 0.1rem solid var(--theme-popup-border);
}

.table-wrapper {
  overflow-x: auto; // make wide tables scroll if they overflow

  &>table {
    margin: 1rem auto;
    border-collapse: collapse;

    td {
      border: 0.1rem var(--table-border-color) solid;
      padding: 0.375rem 0.8125rem;
    }

    thead {
      background-color: var(--table-header-bg);

      td {
        font-weight: 700;
        border: none;
      }

      th {
        padding: 0.3rem 0.2rem;

        &:empty {
          display: none;
        }
      }

      tr {
        border: 0.1rem var(--table-header-bg) solid;
      }
    }

    tbody {
      tr {
        &:nth-child(2n) {
          background-color: var(--table-alternate-bg);
        }
      }
    }
  }
}

blockquote {
  padding: 0 1em;
  color: var(--blockquote-color);
  border-left: 0.25em solid var(--blockquote-color);
  margin: 0;
}

kbd {
  display: inline-block;

  font-family: var.$mono-font;
  font-size: var.$code-font-size;
  vertical-align: top;

  background-color: var(--table-border-color);
  border-radius: 0.4em;
  box-shadow: inset 0 -0.3em 0 var(--theme-popup-border);

  margin: 0 0.14em;
  padding: 0.3em 0.4em;
}
