@import "../pages/mixins";
/* importing via helmet.js isn't working ¯\_(ツ)_/¯ */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Roboto:300,300i,500|Source+Sans+Pro:400");

/* -----------------------------------
resets & quality of life improvements
----------------------------------- */

* {
  margin: 0;
  padding: 0;
}
/* usually necessary for responsive layouts */
img, svg, textarea {
  max-width: 100%;
}
/* border box default: http:/*www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* position:relative by default */
body * {
  position: relative;
}
/* hide the spinner on inputs with a type of "number" */
/* see https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* `display: none` can cause crashes */
  margin: 0; /* nuke the margin */
}
/* textareas can be resized, but only vertically */
textarea {
  resize: vertical;
}


/* -----------------------------------
fonts & base styles
----------------------------------- */

html {
  /* theming */
  background-color: var(--dark-3);
  /* font scaling */
  font-size: 87.5%; /* 14px; override blueprint */

  /* scale up type on big screens */
  @add-mixin from-sm {
    font-size: 93.75%; /* 1rem = 15px */
  }
  @add-mixin from-md {
    font-size: 100%; /* 1rem = 16px */
  }
  @add-mixin from-lg {
    font-size: 106.25%; /* 1rem = 17px  */
  }
  @add-mixin from-xl {
    font-size: 112.5%; /* 1rem = 18px */
  }
  @add-mixin from-xxl {
    font-size: 125%; /* 1rem = 18px */
  }
}

body {
  /* typography */
  @add-mixin body-font; /* override blueprint */
  /* theming */
  color: var(--light-2);

  & * {
    color: inherit;
  }
}

/* headings */
h1, h2, h3, h4, h5, h6,
.heading {
  @add-mixin heading-font;
}

/* default font sizing and line-height */
.font-xxl        { @add-mixin font-xxl; }
h1, .font-xl     { @add-mixin font-xl;  }
h2, .font-lg     { @add-mixin font-lg;  }
h3, .font-md     { @add-mixin font-md;  }
h4, .font-sm     { @add-mixin font-sm;  }
h5, h6, .font-xs { @add-mixin font-xs;  }
small, .font-xxs { @add-mixin font-xxs; }

/* labels */
.label {
  @add-mixin body-font;
  @add-mixin font-uppercase;
}

/* subheads */
.subhead {
  @add-mixin heading-font;
  @add-mixin font-smoothing;
  @add-mixin font-uppercase;
}

/* default link style */
p > a,
li > a,
.link,
.d3plus-tooltip-body > a,
.datachile-tooltip > a {
  @add-mixin body-font-bold;
  color: var(--accent-light);
  /* override blueprint */
  text-decoration: underline;
  /* transitions */
  transition:
    color 0.25s ease-out,
    opacity 0.25s ease-out;

  &:hover, &:focus {
    color: var(--white);
  }
}

/* white links; link class also required */
.inverted-link {
  color: var(--white);

  &:hover, &:focus {
    color: var(--white);
  }
}


/* -----------------------------------
code blocks
----------------------------------- */

/* code block formatting */
code,
pre {
  @add-mixin code-font;
  padding: 0.25em 0.5em 0.15em 0.5em;
  border-radius: 2px;
  overflow-x: scroll;
}

/* inline / wrapping code samples */
code {
  display: inline-block;
  vertical-align: bottom;
  /* typography */
  font-size: 0.666em;
  white-space: nowrap; /* keep together */
  /* theming */
  background-color: var(--light-2);
  color: var(--black);
  box-shadow: 0 1px 1em color(var(--black) a(0.333));
  top: -1px;
}

/* make them stack */
table code {
  margin-right: 0.375em;
  margin-bottom: 0.5em;
  top: 0.25rem;
  line-height: 1.25;
  white-space: normal;
}

/* big code blocks */
pre {
  /* theming */
  background-color: var(--black);
  color: var(--light-2);
  white-space: pre-wrap;
  overflow: auto;
  overflow-y: scroll;
  margin: 10px 0px;
  max-height: 32rem;

  /* inherit <pre> color & font-size */
  & > code {
    background-color: inherit;
    color: inherit;
    font-size: 1em;
  }

  /* print styles */
  @media print {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}


/* -----------------------------------
grids
----------------------------------- */

/* lost config */
@lost flexbox flex;
@lost gutter var(--gutter);
@lost rounder 99.9999999;

.main-container {
  lost-flex-container: column;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* single column layout */
.lost-1 {
  lost-column: 1;
}
@add-mixin for-sm {
  .lost-1-2,
  .lost-1-3,
  .lost-2-3,
  .lost-1-4 {
    lost-column: 1;
  }
}

/* multi column layout */
@add-mixin from-sm {
  .lost-1-2 { lost-column: 1/2; }
  .lost-1-3 { lost-column: 1/3; }
  .lost-2-3 { lost-column: 2/3; }
  .lost-1-4 { lost-column: 1/4; }
}

/* space out adjacent visualizations */
.section + .section [class*="lost"] {
  margin-top: 2rem;
}


/* -----------------------------------
profile theming
----------------------------------- */

@each $theme in
  geo,
  countries,
  institutions,
  careers,
  products,
  industries {
  .color-$(theme) {
    color: var(--color-$(theme)) !important;
  }
  .color-$(theme)-light {
    color: var(--color-$(theme)-light) !important;
  }
  .color-$(theme)-hover {
    &:hover, &:focus {
      color: var(--color-$(theme)) !important;
    }
  }
  .border-$(theme) {
    border-color: var(--color-$(theme)) !important;
  }
  .border-$(theme)-hover {
    &:hover, &:focus, &:focus-within {
      border-color: var(--color-$(theme)) !important;
    }
  }
  .fill-$(theme) {
    fill: var(--color-$(theme));
  }
  .background-$(theme) {
    background-color: var(--color-$(theme)) !important;

    /* interactions */
    &[class*=btn],
    &[class*=category] {
      &:hover, &:focus {
        background-color: var(--color-$(theme)-light) !important;
      }
    }
  }
  .background-$(theme)-hover {
    &:hover, &:focus {
      background-color: var(--color-$(theme)-light) !important;
    }
  }
  .background-$(theme)-dark-2 {
    background-color: var(--color-$(theme)-dark-2) !important;
  }
}

.color-gray {
  color: var(--light-2);
}
.border-gray {
  border-color: var(--light-2);
}
.fill-gray {
  fill: var(--light-2);
}
.background-gray {
  background-color: var(--light-2);
}

/*color-geo: "#4B71B5"
color-countries: "#1ECBD8"
color-institutions: "#7777ED"
color-careers: "#E5C38D"
grayroducts: "#FF7474"
color-industries: "#2A8090"*/


/* -----------------------------------
components
----------------------------------- */

/* tooltips */
/* TODO: standardize/refactor */
.datachile-tooltip {
  @add-mixin font-xs;
  text-align: center;
  padding: 0.75rem;
  background-color: var(--dark-2);
  border: 1px solid var(--dark-3);
  color: var(--light-1);
}

/* override inline style */
.d3plus-tooltip {
  background-color: var(--dark-2) !important;
  color: var(--light-1) !important;
  padding: 0.75rem !important;
  z-index: 99; /* above fixed nav, behind drawer nav */

  & .tooltip-title + .tooltip-subhead {
    margin-top: -0.75rem;
  }

  & td {
    padding: 2px 10px !important;
  }
}
.d3plus-tooltip-body {
  @add-mixin body-font;
  min-width: 160px;

  &, & > * {
    font-size: 0.625rem !important; /* font-xxs */
    line-height: 1.5;
  }
}

/* blueprint override */
.bp3-popover-arrow path {
  fill: var(--dark-2) !important;
}
.bp3-popover-content {
  @add-mixin font-xs;
  @add-mixin body-font;
  /* blueprint overrides */
  background-color: var(--dark-2) !important;
  color: var(--light-1) !important;
  padding: 1rem !important;

  /* reset margin */
  & *:last-child {
    margin-bottom: 0;
  }
}

.d3plus-tooltip .tooltip-list {
  margin-top: -1em !important;
  & li {
    @add-mixin body-font;
    color: var(--light-2);
    display: block;
    line-height: 2.25;
    & + li {
      border-top: 1px solid var(--dark-3);
    }
  }
}

.d3plus-tooltip .tooltip-button {
  display: block;
  padding: 0.5em;
  margin-top: 1em;
}

.tooltip-ellipsis {
  color: var(--black);
}

table.tooltip-table {
  width: 100%;
  & tr {
    & td {
      width: 50%;
      &.data {
        text-align: right;
      }
    }
  }
}

/* blueprint overlay fixes */
.bp3-overlay {
  z-index: 999;

  & > span {
    @add-mixin absolute-expand;
  }

  /* make sure tooltips appear in front of fixed nav */
  & .bp3-overlay-content {
    z-index: 50;
  }
}

/* bp3-switch theming */
.bp3-switch,
.bp3-switch .bp3-control-indicator {
  cursor: default; /* it's a checkbox, not a link */
}
/* sizing & typography overrides */
.bp3-control.bp3-switch {
  @add-mixin font-xxs; /* label text */
  height: 1em;
  padding-left: 34px;

  /* reset box shadow on switch handle */
  & .bp3-control-indicator:before {
    box-shadow: none !important;
  }
}

.bp3-switch:active .bp3-control-indicator {
  transform: scale(0.95);
  background-color: var(--accent-light) !important; /* override the active color */
}
.bp3-control.bp3-switch .bp3-control-indicator {
  background-color: var(--dark-1);
  transform: background-color 0.2s ease-out;
}
.bp3-control.bp3-switch:hover .bp3-control-indicator,
.bp3-control.bp3-switch:focus .bp3-control-indicator {
  background-color: var(--gray);
}
/* NOTE: this is the type of css that deep nesting creates 😡 */
.bp3-control.bp3-switch input:checked ~ .bp3-control-indicator,
.bp3-control.bp3-switch .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator,
.bp3-control.bp3-checkbox .bp3-control.bp3-switch input:indeterminate ~ .bp3-control-indicator {
  background-color: var(--accent);
}
.bp3-control.bp3-switch:hover input:checked ~ .bp3-control-indicator,
.bp3-control.bp3-switch:focus input:checked ~ .bp3-control-indicator,
.bp3-control.bp3-switch:hover .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator,
.bp3-control.bp3-switch:focus .bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator,
.bp3-control.bp3-checkbox .bp3-control.bp3-switch:hover input:indeterminate ~ .bp3-control-indicator,
.bp3-control.bp3-checkbox .bp3-control.bp3-switch:focus input:indeterminate ~ .bp3-control-indicator {
  background-color: var(--accent-light);
}

/* tags */
.tag {
  display: inline-block;
  background-color: var(--dark-1);
  padding: 0 0.5em;
  border-radius: 2px;
  text-shadow: none !important;

  &:not(:last-of-type) {
    margin-right: 0.5em;
  }
}


/* category link */
.category {
  /* typography */
  @add-mixin heading-font;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  /* theming */
  background-color: var(--white);
  border-radius: 1em;
  opacity: 0.625;
  /* sizing */
  padding: 0.125em 1em 0.25em 1em;
  /* transitions */
  transition: all 0.2s ease;
  transition-property: box-shadow, opacity;

  /* default color */
  &:not([class*=color-]) {
    color: var(--accent);
  }

  /* image right */
  & img,
  & svg {
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25em;
    margin-left: -0.25em;
    top: -0.125em;
  }

  /* interactions */
  &:hover,
  &:focus {
    box-shadow: 0 1px 1.25em rgba(0, 0, 0, 0.25);
    opacity: 0.875;
    text-decoration: none;
  }
}


/* buttons */
.btn {
  cursor: pointer;
  /* typography */
  @add-mixin heading-font;
  @add-mixin font-uppercase;
  text-align: center;
  /* sizing */
  padding: 1.125em 2.25em;
  line-height: 1;
  /* positioning */
  display: inline-block;
  /* theming */
  border-radius: 30px;
  border: none;
  color: var(--white);
  /* transitions */
  transition: all 1s ease;
  transition-property: background-color, box-shadow, color;

  /* default theme */
  &:not([class*=background-]) {
    background-color: var(--accent);

    /* interactions */
    &:hover, &:focus {
      background-color: var(--accent-light);
    }
  }

  /* icon */
  & .btn-icon {
    display: inline-block;
    vertical-align: middle;
    font-size: inherit;
    width: 1em;
    /* icon offset */
    top: -0.0625em; /* fudge into place */
    /* transitions */
    transition: transform 0.3s ease;

    &:not(:first-child) {
      left: 0.125em;
      margin-right: -0.25em;
    }
    & + .btn-text {
      margin-left: 0.5em;
    }
  }

  /* interactions */
  &:hover,
  &:focus {
    box-shadow: 0 1px 1.25em rgba(0, 0, 0, 0.25);
    color: var(--white);
    text-decoration: none;

    &[href] .btn-icon {
      transform: translateX(0.25em);
    }
  }
}

/* button group */
.btn-group {
  display: flex;

  & > .btn {
    flex: 1 0 auto;
    /* btn overrides */
    padding: 0.75em 0;

    /* set background color */
    &, &:hover, &:focus {
      background-color: var(--black);
      box-shadow: none;
    }

    /* active + focus state */
    &:active,
    &.is-active:focus {
      color: var(--white);
      outline: none;
    }

    /* inactive state */
    &.is-inactive {
      color: #656569;

      /* used for gender icons */
      & img {
        opacity: 0.5;
      }

      &:hover, &:focus {
        color: var(--accent-light);
      }
    }

    /* remove radius */
    &:not(:last-of-type) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(:first-of-type) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

/* space out button groups & select menus */
.viz-controls {

  & > * {
    margin-top: 1rem;
  }

  /* side by side layout */
  @add-mixin from-xs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;

    /* space out items */
    & > * {
      flex: 1 0 50%;
      flex: 1 0 calc(50% - var(--gutter-half));

      &:last-child {
        margin-left: var(--gutter);
      }
    }
  }
}

/* cover link */
.cover-link {
  @add-mixin absolute-expand;
  z-index: 2;
}


/* -----------------------------------
D3plus overrides
----------------------------------- */

/* the inline style isn't working ¯\_(ツ)_/¯ */
.d3plus-textBox {
  & text {
    @add-mixin visualization-font;

    /* replace default dark color returned by colorContrast.js */
    &[fill="#444444"] {
      fill: var(--dark-3);
    }
  }
}

/* position total */
.d3plus-viz-total {
  transform: translate(-3px, -5px);
}

/* style timeline */
.d3plus-viz-timeline {

  /* enhance active tick handle */
  & .handle {
    /* fudge handle into position */
    transform: translateX(-2px); /* offset width */
    /* theming */
    rx: 4px;
    ry: 4px;
    /* transitions */
    will-change: x;
    transition: x 0.333s ease-out;
  }
}

/* make room for the 1px axis bar */
.d3plus-Bar-group {
  transform: translateY(-0.5px);
}


/* -----------------------------------
utilities
----------------------------------- */

/* accessibly hidden text and elements */
.u-visually-hidden {
  @add-mixin visually-hidden;
}

.u-text-center {
  text-align: center !important;
}

.u-btn-reset {
  background: none;
  border: none;
  padding: 0;
}

.u-list-reset {
  @add-mixin list-reset;
}

/* show/hide content */
.u-hide-below-xs {
  @add-mixin for-xs {
    display: none !important;
  }
}
.u-hide-above-xs {
  @add-mixin from-xs {
    display: none !important;
  }
}
