@import "sass-zero/variables";
@import "sass-zero/mixins";

$font-family: $font-sans;

$radius-primary:   $rounded;
$radius-secondary: $rounded;

:root {
  --color-bg--main:      #{$white};
  --color-bg--surface:   #{$gray-100};
  --color-bg--highlight: #{$gray-200};
  --color-primary:       #{$gray-900};
  --color-text:          #{$gray-900};
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg--main:      #{$gray-900};
    --color-bg--surface:   #{$gray-800};
    --color-bg--highlight: #{$gray-700};
    --color-primary:       #{$white};
    --color-text:          #{$white};
  }
}

html {
  accent-color: var(--color-primary);
  background: var(--color-bg--main);
  color: var(--color-text);
  font-family: $font-family;
}

.btn {
  border-radius: $radius-primary;
  border-width: $border;
  display: inline-block;
  font-weight: $font-bold;
  padding: $size-2 $size-3;
  cursor: pointer;

  &--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg--main);
  }

  &--secondary {
    background-color: var(--color-bg--main);
    border-color: var(--color-primary);
  }

  &--tertiary {
    background-color: $transparent;
    border-color: $transparent;
  }

  &--small {
    font-size: $text-sm;
  }

  &__icon {
    vertical-align: sub;
    font-size: 1.25em;
  }

  &:disabled {
    pointer-events: none;
    opacity: $opacity-50;
  }
}

.input {
  @include appearance-none;
  resize: none;
  background-color: var(--color-bg--main);
  border-radius: $radius-secondary;
  border-width: $border;
  padding: $size-2 $size-3;
  width: $w-full;

  &--select {
    background-image:
      linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
      linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
    background-position: calc(100% - 20px), calc(100% - 15px);
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
  }

  &:disabled {
    pointer-events: none;
    opacity: $opacity-50;
  }
}

.popup-menu {
  background-color: var(--color-bg--surface);
  border-radius: $radius-secondary;
  padding: $size-2 $size-3;
  box-shadow: $shadow-md;
  position: absolute;
  z-index: $z-10;
}

input[type="checkbox"], input[type="radio"] {
  transform: scale(1.2, 1.2);
  margin: $size-1;
}

blockquote {
  border-left-width: $border-4;
  padding: $size-3 $size-4;
}

code {
  background-color: var(--color-bg--surface);
  border-radius: $rounded;
  font-size: $text-sm;
  padding: $size-1;
  white-space: nowrap;
}

pre {
  background-color: var(--color-bg--surface);
  border-left-width: $border-4;
  overflow-y: hidden;

  & > code {
    border-radius: $rounded-none;
    display: block;
    padding: $size-2 $size-3;
    white-space: pre;
  }
}

kbd {
  background-color: var(--color-primary);
  border-radius: $rounded;
  font-size: $text-sm;
  padding: $size-1;
  color: var(--color-bg--main);
}

mark {
  background-color: var(--color-bg--highlight);
  border-radius: $rounded;
  padding: $size-1;
  color: inherit;
}

hr {
  margin: $size-6 $size-0;
}

a {
  font-weight: $font-bold;
}

menu, ul, ol {
  padding-left: $size-10;
}

menu, ul {
  list-style: disc outside;
}

ol {
  list-style: decimal outside;
}

dt {
  font-weight: $font-bold;
}

label, legend, dt, dd, li {
  margin-bottom: $size-1;
}

h1, h2, h3, h4, h5, h6, .hdg {
  margin-bottom: $size-4;
}

fieldset, .input {
  margin-bottom: $size-6;
}

table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
  margin-bottom: $size-6;
}

dialog {
  background-color: var(--color-bg--surface);
  border-radius: $radius-primary;
  padding: $size-3 $size-4;
  box-shadow: $shadow-lg;
  color: inherit;
}

dialog::backdrop {
  background-color: rgba($gray-500, $opacity-75);
}

progress {
  background-color: var(--color-bg--surface);
}

@include progress-bar {
  background-color: var(--color-primary);
}

details {
  position: relative;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

table, progress {
  width: $w-full;
}

td, th {
  border-bottom-width: $border;
  padding: $size-3 $size-4;
  text-align: left;
}

h1, h2, h3, h4, h5, h6, .hdg {
  font-weight: $font-bold;
  line-height: $leading-tight;
}

h1, .hdg--4xl {
  font-size: $text-4xl;
}

h2, .hdg--3xl {
  font-size: $text-3xl;
}

h3, .hdg--2xl {
  font-size: $text-2xl;
}

h4, .hdg--xl {
  font-size: $text-xl;
}

h5, .hdg--lg {
  font-size: $text-lg;
}

h6, .hdg--base {
  font-size: $text-base;
}