import { css } from "@emotion/core";

export const globalStyles = css`
  .slick-slider {
    margin-bottom: 50px;
    z-index: 0;
  }

  .slick-list,
  .slick-slider,
  .slick-track {
    position:relative;
    display:block
  }

  .slick-loading .slick-slide,
  .slick-loading .slick-track {
    visibility:hidden
  }

  .slick-slider {
    box-sizing:border-box;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -khtml-user-select:none;
    -ms-touch-action:pan-y;
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent
  }

  .slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 1;
  }

  .slick-list:focus {
    outline:0
  }

  .slick-list.dragging {
    cursor:pointer;
    cursor:hand
  }

  .slick-slider .slick-list,
  .slick-slider .slick-track {
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
  }
  .slick-track{
    top:0;
    left:0
  }
  .slick-track:after,
  .slick-track:before {
    display:table;
    content:''
  }
  .slick-track:after {
    clear:both
  }
  .slick-slide {
    display:none;
    float:left;
    height:100%;
    min-height:1px
  }
  [dir=rtl] .slick-slide {
    float:right;
  }
  .slick-slide img {
    display:block;
  }
  .slick-slide.slick-loading img {
  display:none;
  }
  .slick-slide.dragging img {
    pointer-events:none;
  }

  .slick-initialized .slick-slide{
    display:block;
  }

  .slick-vertical .slick-slide{
    display:block;
    height:auto;
    border:1px solid transparent
  }

  .slick-arrow.slick-hidden{
    display:none
  }

  .slick-dots,
  .slick-next,
  .slick-prev {
    position:absolute;
    display:block;
    padding:0;
  }

  .slick-dots li button:before,
  .slick-next:before,.slick-prev:before {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  .slick-loading .slick-list {
    background:url(ajax-loader.gif) center center no-repeat #fff;
  }
  .slick-next,
  .slick-prev {
    font-size:0;
    line-height:0;
    top:50%;
    width:44px;
    height:44px;
    -webkit-transform:translate(0,-50%);
    -ms-transform:translate(0,-50%);
    transform:translate(0,-50%);
    cursor:pointer;
    color:transparent;
    border:none;
    outline:0;
    background: var(--theme-ui-colors-background,#fafafa);
    z-index: 2;
  }

  .slick-next:focus,
  .slick-next:hover,
  .slick-prev:focus,
  .slick-prev:hover {
    color:transparent;
    outline:0;
    background: var(--theme-ui-colors-hover,rgba(0,0,0,0.07));
    outline: 1px solid var(--theme-ui-colors-accent,#6166DC);
  }

  .slick-next:focus:before,
  .slick-next:hover:before,
  .slick-prev:focus:before,
  .slick-prev:hover:before {
    opacity:1;
  }

  .slick-next.slick-disabled:before,.slick-prev.slick-disabled:before {
    opacity:.25;
  }

  .slick-next:before,
  .slick-prev:before {
    font-size:32px;
    line-height:1;
    opacity:.75;
    color: var(--theme-ui-colors-accent,#EC6C20)
  }

  .slick-prev {
    left: 0;
    margin-left: 10px;
  }
  [dir=rtl] .slick-prev {
    right: 0;
    left:auto;
  }
  .slick-prev:before {
    content:'←';
  }
  .slick-next:before,[dir=rtl] .slick-prev:before {
    content:'→';
  }

  .slick-next {
    right: 0px;
    margin-right: 10px;
  }
  [dir=rtl] .slick-next {
    right:auto;
    left:-25px
  }
  [dir=rtl] .slick-next:before {
    content:'←';
  }
  .slick-dotted.slick-slider {
    margin-bottom:30px;
  }
  .slick-dots {
    bottom:-25px;
    width:100%;
    margin:0;
    list-style:none;
    text-align:center;
  }
  .slick-dots li {
    position:relative;
    display:inline-block;
    width:20px;
    height:20px;
    margin:0 5px;
    padding:0;
    cursor:pointer;
  }
  .slick-dots li button {
    font-size:0;
    line-height:0;
    display:block;
    width:20px;
    height:20px;
    padding:5px;
    cursor:pointer;
    color:transparent;
    border:0;
    outline:0;
    background:0 0;
  }
  .slick-dots li button:focus,.slick-dots li button:hover {
    outline:0;
  }
  .slick-dots li button:focus:before,.slick-dots li button:hover:before {
    opacity:1;
  }

  .slick-dots li button:before {
    font-size:24px;
    line-height:20px;
    position:absolute;
    top:0;
    left:0;
    width:24px;
    height:24px;
    content:'•';
    text-align:center;
    opacity:.25;
    color: var(--theme-ui-colors-articleText,#08080B);
  }
  .slick-dots li.slick-active button:before {
    opacity:.75;
    color: var(--theme-ui-colors-accent,#6166DC);
  }

  /**
   * Thanks to Benjamin De Cock
   * https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d
   */
  :root {
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  }

  @font-face {
    font-family: "IBM Plex Sans", "-apple-system", "BlinkMacSystemFont", "San Francisco",
      "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
      "Arial", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-display: block;
  }

  :root {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    cursor: default;
    font-size: 0.625rem;
    line-height: 1.4;
  }

  body {
    font-family: "IBM Plex Sans", "-apple-system", "BlinkMacSystemFont", "San Francisco",
      "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
      "Arial", sans-serif;
    font-size: 1.6rem;
    margin: 0;
    font-weight: 400;
    height: 100%;
  }

  article {
    word-break: break-word;
  }

  button,
  a {
    text-decoration: none;
    cursor: pointer;
  }

  a:focus {
    outline: none;
  }

  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
    align-self: center;
  }

  input,
  textarea,
  select,
  button {
    font-family: "IBM Plex Sans", "-apple-system", "BlinkMacSystemFont", "San Francisco",
      "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
      "Arial", sans-serif;
  }

  .underline {
    text-decoration: underline;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: monospace;
  }

  fieldset,
  button {
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
  }

  audio:not([controls]) {
    display: none;
  }

  details {
    display: block;
  }

  input {
    &:focus,
    &:active {
      outline: none;
    }

    &[type="number"] {
      width: auto;
    }
  }

  img.Image__Zoom ~ div {
    background: transparent !important;
  }
`;