@import "@/scss/base";

:root {
  font-family: var(--font-family-copy);
  font-size: var(--font-size);
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: var(--text-line-height);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.scroll-lock {
    overflow: hidden;
  }
}

main {
  margin: var(--navigation-cutout);
  transition: 0.4s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-headings);
  font-weight: 900;
  font-stretch: ultra-expanded;
  font-optical-sizing: auto;
}

h1 {
  font-size: 3rem;
}

p {
  margin: var(--paragraph-margin) 0;
}

a {
  text-decoration: none;
  color: var(--color-link-text);
  transition: 0.4s;

  box-shadow: inset 0 calc(var(--text-line-height) * -0.125) 0 0 var(--color-link-text-underline);

  &:hover {
    color: var(--color-link-text-hover);
    box-shadow: inset 0 calc(var(--text-line-height) * -1) 0 0 var(--color-link-text-underline);
  }
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: var(--table-max-width);
  margin: 2rem auto;
  padding: var(--table-outer-spacing);

  th,
  td {
    padding: var(--table-cell-padding);
  }

  th {
    font-weight: bold;
    background-color: var(--table-heading-background);
    color: var(--table-heading-text-color);

    &:first-child {
      border-radius: var(--table-border-radius) 0 0 0;
    }

    &:last-child {
      border-radius: 0 var(--table-border-radius) 0 0;
    }

    &.name {
      text-align: right;
    }
  }

  td {
    background-color: var(--table-cell-background);
    color: var(--table-cell-text-color);

    svg {
      fill: var(--table-cell-text-color);
    }
  }

  tr:hover td {
    background-color: var(--table-row-background-hover);
    color: var(--table-cell-text-color-hover);

    svg {
      fill: var(--table-cell-text-color-hover);
    }
  }

  tr:last-child td {
    &:first-child {
      border-radius: 0 0 0 var(--table-border-radius);
    }

    &:last-child {
      border-radius: 0 0 var(--table-border-radius) 0;
    }
  }
}