$dimensions: 16 24 32 48 64 96 128 256;
$family-sans-serif: sans-serif;
$family-monospace: monospace;

@import "bulma/bulma";
@import "custom";

td.hljs-ln-numbers {
  color: hsl(228, 8%, 80%)
}

.hero-foot .tabs {
  padding-bottom: 1px;
}

.box-title {
  box-shadow: inset 0 -1px 0 0 $grey;

  h2 {
    color: $white-ter;
  }

  a {
    color: $link;

    a:hover {
      color: $link-hover;
    }
  }

  .button {
    color: $white-ter;
    background-color: lighten($dark, 5);
    border-color: lighten($dark, 10);
  }

  .tabs {
    margin-bottom: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;

    ul {
      border-bottom-color: $grey;

      li > a {
        color: $grey;
        border-bottom-color: $grey;

        &:hover {
          color: $grey-light;
          border-bottom-color: $grey-light;
        }
      }

      li.is-active {
        border-bottom: $white-ter;

        a {
          color: $white-ter;
          border-bottom-color: $white-ter;
        }
      }
    }
  }
}

// notices (different box-shadow size)
.box-title + .file-notice {
  margin-top: calc(-1.5rem - 1px); // -1px as well for the box-shadow
  border-top: 1px solid $dark; // make up for the missing box-shadow
}

// codesass
$atom-one-light-background: #fafafa;

textarea.codesass__textarea {
  // where does this magic color come from?
  caret-color: rgb(74, 74, 74);
  background-color: $atom-one-light-background;
}

div.codesass.codesass--has-line-numbers::before {
  background-color: darken($atom-one-light-background, 5);
}

.codesass.codesass--has-line-numbers .codesass__lines {
  color: darken($atom-one-light-background, 30);
}

.diffs .subtitle.hunk code {
  background-color: darken($grey-darker, 5);
}

input[type=checkbox] {
  background-color: $white;
  border-color: 1px solid darken($white, 10%);

  &:focus, &:active {
    border-color: lighten($grey-dark, 20%);
  }

  &:disabled {
    border-color: $grey;
  }

  &:checked::after {
    border-color: $grey-dark;
  }
}

.navbar {
  min-height: 4rem;
}
