@import "colors";

@symantic: false;

// Variables
@font-size--header-lg: 1.5rem;
@font-size--header-md: 1.2rem;
@font-size--header-sm: 1.1rem;

@font-size--body-md: 16px;
@font-size--body-sm: 14px;
@font-size--body-xs: 12px;

@font-size--badge: 11px;

// Fonts
@font-family--header: "Corbert", Helvetica, Arial, sans-serif;
@font-family--content: Helvetica, Arial, sans-serif;

@postal_url: "https://development-droprccorp.netdna-ssl.com/";

@font_cdn: @postal_url + "fonts/corbert/corbert/";

@font-face {
  font-family: "Corbert";
  src: url("@{font_cdn}corbert-bold/corbert-bold.eot");
  src: url("@{font_cdn}corbert-bold/corbert-bold.eot#iefix") format("embedded-opentype");
  src: url("@{font_cdn}corbert-bold/corbert-bold.woff") format("woff");
  src: url("@{font_cdn}corbert-bold/corbert-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Corbert";
  src: url("@{font_cdn}corbert-italic/corbert-italic.eot");
  src: url("@{font_cdn}corbert-italic/corbert-italic.eot#iefix") format("embedded-opentype");
  src: url("@{font_cdn}corbert-italic/corbert-italic.woff") format("woff");
  src: url("@{font_cdn}corbert-italic/corbert-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Corbert";
  src: url("@{font_cdn}corbert-regular/corbert-regular.eot");
  src: url("@{font_cdn}corbert-regular/corbert-regular.eot#iefix") format("embedded-opentype");
  src: url("@{font_cdn}corbert-regular/corbert-regular.woff") format("woff");
  src: url("@{font_cdn}corbert-regular/corbert-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


// Mixins
.fix-spacing() {
  & + h1,
  & + h2,
  & + h3,
  & + p {
    margin-top: 0px;
  }
}

.font--header(@size: @font-size--header-md, @force-uppercase: false) {
  .fix-spacing;
  font-family: @font-family--header;
  font-size: @size;
  line-height: 1.5em;
  font-weight: bold;
  text-decoration: none;

  & when (@force-uppercase) {
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }
}

.font--content(@size: @font-size--body-md) {
  .fix-spacing;
  font-family: @font-family--content;
  font-size: @size;
  letter-spacing: 0.5px;
  line-height: 1.3em;
}


// Classes
.header {
  .font--header;
  color: @color--gray-dark;
}

.header--large {
  .font--header(@font-size--header-lg);
  color: @color--black;
}

.header--small {
  .font--header(@font-size--header-sm);
  color: @color--gray;
}

.content {
  .font--content;
}

.content--small {
  .font--content(@font-size--body-sm);
}

.content--extra-small {
  .font--content(@font-size--body-xs);
}

.label {
  .font--header(@font-size--body-sm, true);
  color: @color--gray-dark;
  display: block;
}

.link {
  -webkit-tab-highlight-color: initial;
  color: @color--blue;

  &:hover {
    color: darken(@color--blue, 10%);
  }

  &:active {
    color: darken(@color--blue, 15%);
  }

  &:visited {
    color: @color--purple;
  }
}

// html elements
body {
  font-family: @font-family--content;
}

a when (@symantic) {
  .link;
}

h1 when (@symantic) {
  .header--large;
}

h2 when (@symantic) {
  .header;
}

h3 when (@symantic) {
  .header--small;
}

label when (@symantic) {
  .label;
}

p when (@symantic) {
  .content;
}

span when (@symantic) {
  .content;
}

small when (@symantic) {
  .content--small;
}

.markdown-text {
  word-break: break-word;
  word-wrap: break-word;
  white-space: -moz-pre-wrap;
  .font--content(@font-size--body-sm);

 * {
    width: 100%;
  }

  ul, ol, h1, h2, h3, pre, p {
    margin: 0;
    display: block;

    &:not(:first-child) {
      margin-top: 1em;
    }
  }

  h1 {
    line-height: 1.2em;
  }

  code {
    display: inline;
    background-color: @color--off-white;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    border: 1px solid @color--gray-lighter;
    letter-spacing: 0.4px;
    line-height: @font-size--body-sm;
  }

  pre {
    border: 1px solid @color--gray-lighter;
    background-color: @color--off-white;
    border-radius: 3px;
    padding: 0.1em;
    // width: 0;
    flex-grow: 123;

    code {
      display: block;
      border: none;
      overflow-x: auto;
      border-radius: 0px;
      padding: 1em;
      width: 100%;
      box-sizing: border-box;
    }
  }

  p {
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.5em;
  }

  blockquote {
    border-left: 3px solid @color--gray-light;
    padding-left: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }
}