@import "typography";
@import "grid";
@import "general-mixins";
@import "measurements";
@import "colors";
@import "icons";


.hljs-selector-class {
  color: $highlight-color; // overriding highlightjs which has low contrast in css class highlighting
}

#skip a {
  background-color: $nypl-white;
  border: 0;
  color: $link-color;
  display: block;
  font-size: 13px;
  height: 1px;
  left: -10000px;
  line-height: 2;
  overflow: hidden;
  padding: 5px 10px 3px;
  position: absolute;
  top: 7px;
  width: 1px;
  z-index: 1000;

  &:focus {
    border: 5px solid $focus-color;
    height: auto;
    left: 7px;
    outline: 0;
    overflow: visible;
    padding: ($general-padding / 2) 0;
    width: auto;
  }
}

.hidden {
  display: none;
}

.centered {
  text-align: center;
}

$blue: #00f;
$gray: #ccc;

code {
  border-radius: $general-border-radius;
  padding: 0;

  &::before,
  &::after {
    letter-spacing: -0.2em;
    content: "\00a0";
  }
}

pre {
  border: $simple-border solid $nypl-light-gray;
}

h1 {
  margin-top: 0;
}

.toolkit-svg-icon {
  border: 1px dotted $nypl-light-gray;
  margin-right: 1rem;
}

.clickable-header {
  cursor: pointer;
}

.clickable-header:hover {
  text-decoration: underline;
}

.top-level-header {
  display: inline-block;
}

.back-to-top {
  cursor: pointer;
  font-style: normal;
  margin-left: 0.5rem;

  &:hover {
    text-decoration: underline;
  }
}

// Style the Color swatches in color.html

// Create the color swatch classes used in sections/color.html
@mixin swatch-box ($color-name: $nypl-light-gray) {
  background-color: $color-name;
  @content;
  }

$colors: (
 nypl-red: $nypl-red,
 nypl-red-dark: $nypl-red-dark,
 nypl-red-tint: $nypl-red-tint,
 nypl-blue: $nypl-blue,
 nypl-blue-dark: $nypl-blue-dark,
 nypl-light-blue: $nypl-light-blue,
 nypl-blue-tint: $nypl-blue-tint,
 nypl-gray-cool: $nypl-gray-cool,
 nypl-gray: $nypl-gray,
 nypl-gray-brown: $nypl-gray-brown,
 nypl-dark-gray: $nypl-dark-gray,
 nypl-light-gray: $nypl-light-gray,
 nypl-white: $nypl-white,
 nypl-black: $nypl-black,
 nypl-yellow: $nypl-yellow,
 nypl-yellow-tint: $nypl-yellow-tint,
 nypl-orange: $nypl-orange,
 nypl-orange-desaturated: $nypl-orange-desaturated,
 nypl-green: $nypl-green,
 nypl-green-dark: $nypl-green-dark,
 nypl-green-tint: $nypl-green-tint,
 nypl-purple: $nypl-purple,
 nypl-purple-dark: $nypl-purple-dark,
 nypl-purple-tint: $nypl-purple-tint,
 nypl-teal: $nypl-teal,
 nypl-teal-dark: $nypl-teal-dark,
 nypl-teal-tint: $nypl-teal-tint
);

@each $nypl-colors, $color-name in $colors {
  .#{$nypl-colors}-swatch {
    @include swatch-box ($color-name);
 }
}


.swatches {
  box-sizing: border-box;

  .reverse {
    color: $nypl-black;
  }
}

.color-box {
  list-style: none;
  padding: 0.25rem;
  margin-left: 0;

  > .main {
    height: 8rem;
    padding-top: 3rem;
  }

  > div {
    color: $nypl-white;
    min-height: 4rem;
    margin: 0;
    padding: 1rem 0 1rem 1rem;
    text-align: left;
  }
}

// Customize the A11y Table here: /sections/color-a11y.html
.nypl-ally-table {
  th {
    text-align: left;
  }
}


// Creating Some Styles for the TK Docs themselves
// adding a toolkit class to the body tag
// Some of this stuff is purely cosmetic. deal with it.
.toolkit {
  .nypl-toolkit-header {
    @include page-header;
    background-color: lighten($nypl-light-blue, 20%);
    border-bottom: solid ($general-border-width * 2) $nypl-blue-dark;

    h2 {
      color: $nypl-blue-dark;
      margin-bottom: 0.25rem;
      //text-shadow: 1px 1px 0 darken($nypl-blue, 0.1);

      + span {
        color: $nypl-blue-dark;
        font-style: italic;
      }
    } // h2 block thing...
  } // /.nypl-page-header

  .main-page {
    h3.top-level-header {
      &::before {
        background: $nypl-blue-dark;
        content: "";
        display: block;
        height: ($general-border-width * 2);
        margin-bottom: 0.5rem;
        width: 5rem;
      }
    }
  }

//
// Modal Documentation Example:
//
  .nypl-toolkit-example {

    .nypl-basic-modal-container {

      .nypl-modal-content {
        margin: $general-margin;
        padding: ($general-margin * 2.5);
        width: 90%;
      }

      .nypl-modal-underlay {
        background: transparentize($nypl-white, 0.2);
      }
    }
  }

  footer {
    background-color: lighten($nypl-light-blue, 20%);
    color: $nypl-blue-dark;
    height: 6rem;
  }
} // /.toolkit

// SVG Section Specific Styles
// Fix the way the logo is displayed in the toolkit's svg page.
textarea {
  color: $nypl-black;
  font-family: monospace;
  font-size: 0.85rem;
  padding: 1rem;
  width: 96.2%;
}

.nypl-toolkit-example {

  .nypl-logo {
    height: 13em;
    width: 20em;
  }
}