@import './_vars';
@import './_mixins';

.required {
  font-size: 11px;
  color: $red-200;
  margin-left: 5px;
  font-weight: $medium;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}
.fixed { position: fixed }

.sticky-below-header {
  // use with a relative parent
  // will start scrolling with the content
  position: sticky;

  // needs full width usually
  width: auto;

  // just below the header
  top: 50px;

  // on top of simple content
  z-index: 1;
}

.absolute-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.z-push-progress-controller {
  z-index: $z-push-progress-controller;
}

.-bottom-25px { bottom: -25px; }

.break-all {
  word-break: break-all;
}
.break-word { overflow-wrap: break-word }

.pre-line {
  white-space: pre-line;
}
.whitespace-normal { white-space: normal !important }

mark {
  background: $yellow-200;
  color: $black;
}

.show-more-link {
  display: block;
  padding: 10px;
  text-align: center;
}

.hover\:table-row-blue {
  transition: background 100ms ease-out,
              color 100ms ease-out;
}
.hover\:table-row-blue:hover {
  background-color: $blue-10;
  color: $blue-50;
  cursor: pointer;
   > :first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
   > :last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.hover\:table-row-blue.selected {
  background-color: $blue-10;
  color: $blue-50;
}

.table-fixed { table-layout: fixed; }
.border-spacing-0 { border-spacing: 0; }
.table-row-bordered:not(:last-child) > .td,
.border-b-CBDDEC {
  border-bottom: 1px solid #CBDDEC;
}
.border-b-grey-20 {
  border-bottom: thin solid $grey-20;
}
.table-row-bordered-grey-10:not(:last-child) > .td {
  border-bottom: 1px solid $grey-10;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-hidden { overflow: hidden }

// display
.hidden { display: none !important }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0 }
.opacity-50 { opacity: .5 }
.opacity-100 { opacity: 1 }

.inline-block { display: inline-block; }

.block { display: block; }
.inline-block { display: inline-block; }
.table-cell { display: table-cell; }

// flex
.flex { display: flex }
.inline-flex { display: inline-flex }
.flex-wrap { flex-wrap: wrap }
.flex-1 { flex: 1 }
.flex-col { flex-direction: column; }
.items-start { align-items: start }
.items-center { align-items: center }
.items-end { align-items: end }
.justify-between { justify-content: space-between }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }

.valign-middle {
  vertical-align: middle !important;
}
.valign-top {
  vertical-align: top;
}
.valign-0 {
  vertical-align: 0 !important;
}

// position
.relative { position: relative; }
.absolute { position: absolute; }

.relative-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.translateX-50p { transform: translateX(-50%) }

.pin-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
}

.-pin-b-20px { bottom: -20px; }
.pin-b { bottom: 0; }
.pin-l { left: 0; }
.pin-r { right: 0; }
.pin-t { top: 0 }
.before_pin-t-2px:before { top: 2px }

// typography
.font-monospace { font-family: monospace }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-20px { line-height: 20px; }
.leading-24px { line-height: 24px; }
.leading-25px { line-height: 25px; }
.leading-30px { line-height: 30px; }
.leading-34px { line-height: 34px; }
.text-left { text-align: left }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-line-through { text-decoration: line-through; }
.text-underline { text-decoration: underline; }
.text-deco-none { text-decoration: none; }
.bold, .font-bold { font-weight: $bold; }
.italic { font-style: italic }
.font-medium { font-weight: $medium; }
.font-regular { font-weight: $regular; }
.nowrap { white-space: nowrap; }
.uppercase { text-transform: uppercase }
.letter-spacing-1px { letter-spacing: 1px }

// box model
.m-0 { margin: 0 !important; }
.m-20px { margin: 20px; }
.m-30px { margin: 30px; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2px { margin-bottom: 2px !important; }
.mb-3px { margin-bottom: 3px; }
.mb-5px { margin-bottom: 5px; }
.mb-10px { margin-bottom: 10px !important; }
.mb-14px { margin-bottom: 14px !important; }
.mb-15px { margin-bottom: 15px; }
.mb-20px { margin-bottom: 20px !important; }
.mb-30px { margin-bottom: 30px !important; }
.mb-40px { margin-bottom: 40px !important; }
.mb-45px { margin-bottom: 45px !important; }
.mb-50px { margin-bottom: 50px; }
.mb-80px { margin-bottom: 80px }
.mb-100px { margin-bottom: 100px }

.mt-0 { margin-top: 0 !important; }
.mt-1px { margin-top: 1px }
.mt-3px { margin-top: 3px !important; }
.mt-5px { margin-top: 5px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-15px { margin-top: 15px; }
.mt-20px { margin-top: 20px; }
.mt-21px { margin-top: 21px; }
.mt-25px { margin-top: 25px; }
.mt-30px { margin-top: 30px !important; }
.mt-35px { margin-top: 35px !important; }
.mt-40px { margin-top: 40px !important; }
.mt-50px { margin-top: 50px; }
.mt-62 { margin-top: 62px; }
.mt-150px { margin-top: 150px; }
.mt-1em { margin-top: 1em !important; }

.-ml-1px { margin-left: -1px !important; }
.-ml-2px { margin-left: -2px; }
.-ml-4px { margin-left: -4px; }
.-ml-10px { margin-left: -10px; }
.ml-0 { margin-left: 0 !important }
.ml-5px { margin-left: 5px; }
.ml-10px { margin-left: 10px; }
.ml-15px { margin-left: 15px; }
.ml-20px { margin-left: 20px; }
.ml-25px { margin-left: 25px; }
.ml-30px { margin-left: 30px; }
.ml-35px { margin-left: 35px; }
.ml-45px { margin-left: 45px; }
.ml-120px { margin-left: 120px; }

.mr-0 { margin-right: 0 !important; }
.mr-5px { margin-right: 5px; }
.mr-10px { margin-right: 10px; }
.mr-15px { margin-right: 15px; }
.mr-20px { margin-right: 20px; }
.mr-30px { margin-right: 30px; }
.mr-40px { margin-right: 40px; }
.mr-60px { margin-right: 60px !important; }
.mr-100px { margin-right: 100px }

.last_mr-0:last-child { margin-right: 0 !important; }

.-m-10px { margin: -10px; }
.-m-20px { margin: -20px; }
.-m-50px { margin: -50px; }
.-mx-10px{margin-left: -10px; margin-right:-10px;}
.-mx-15px{margin-left: -15px; margin-right:-15px;}
.-mx-20px{margin-left: -20px; margin-right:-20px;}
.-mx-40px{margin-left: -40px; margin-right:-40px;}
.-mx-50px{margin-left: -50px; margin-right:-50px;}
.-my-10px{ margin-top: -10px; margin-bottom:-10px; }
.-mt-2px { margin-top: -2px !important }
.-mt-4px { margin-top: -4px !important; }
.-mt-5px { margin-top: -5px !important; }
.-mt-10px { margin-top: -10px; }
.-mt-12px { margin-top: -12px; }
.-mr-12px { margin-right: -12px; }
.-mr-80px { margin-right: -80px; }
.-mb-10px { margin-bottom: -10px }
.-mb-20px { margin-bottom: -20px }
.-mb-40px { margin-bottom: -40px }
.-mb-50px { margin-bottom: -50px }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-10px { margin-left: 10px; margin-right: 10px }
.mx-20px { margin-left: 20px; margin-right: 20px }
.mx-40px { margin-left: 40px; margin-right: 40px }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-10px { margin-top: 10px; margin-bottom: 10px; }
.my-16px { margin-top: 16px; margin-bottom: 16px; }
.my-20px { margin-top: 20px; margin-bottom: 20px; }

.p-0 { padding: 0 !important; }
.p-4px { padding: 4px !important; }
.p-10px { padding: 10px; }
.p-14px { padding: 14px !important; }
.p-15px { padding: 15px; }
.p-16px { padding: 16px; }
.p-19px { padding: 19px !important; }
.p-20px { padding: 20px; }
.p-24px { padding: 24px; }
.p-30px { padding: 30px; }
.p-40px { padding: 40px; }
.p-50px { padding: 50px; }
.pt-5px { padding-top: 5px; }
.pt-10px { padding-top: 10px; }
.pt-20px { padding-top: 20px; }
.pl-0px { padding-left: 0px; }
.pl-5px { padding-left: 5px; }
.pl-10px { padding-left: 10px }
.pl-18px { padding-left: 18px }
.pl-20px { padding-left: 20px !important; }
.pl-30px { padding-left: 30px; }
.pl-40px { padding-left: 40px; }
.pl-60px { padding-left: 60px; }
.pr-0 { padding-right: 0 !important; }
.pr-5px { padding-right: 5px; }
.pr-12px { padding-right: 12px; }
.pr-20px { padding-right: 20px; }
.pr-30px { padding-right: 30px !important; }
.pr-40px { padding-right: 40px; }
.px-0 { padding-left: 0px !important; padding-right: 0px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-5px { padding-bottom: 5px !important; }
.pb-10px { padding-bottom: 10px; }
.pb-15px { padding-bottom: 15px; }
.pb-20px { padding-bottom: 20px; }
.px-5px { padding-left: 5px; padding-right: 5px; }
.px-10px { padding-left: 10px; padding-right: 10px; }
.px-12px { padding-left: 12px; padding-right: 12px; }
.px-15px { padding-left: 15px; padding-right: 15px; }
.px-17px { padding-left: 17px !important; padding-right: 17px !important; }
.px-20px { padding-left: 20px; padding-right: 20px; }
.px-30px { padding-left: 30px; padding-right: 30px; }
.px-40px { padding-left: 40px; padding-right: 40px; }
.px-50px { padding-left: 50px; padding-right: 50px; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-3px { padding-top: 3px; padding-bottom: 3px; }
.py-5px { padding-top: 5px; padding-bottom: 5px; }
.py-8px { padding-top: 8px; padding-bottom: 8px; }
.py-10px { padding-top: 10px; padding-bottom: 10px; }
.py-12px { padding-top: 12px; padding-bottom: 12px; }
.py-14px { padding-top: 14px !important; padding-bottom: 14px !important; }
.py-15px { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-16px { padding-top: 16px; padding-bottom: 16px; }
.py-20px { padding-top: 20px; padding-bottom: 20px; }
.py-24px { padding-top: 24px; padding-bottom: 24px; }
.py-30px { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-40px { padding-top: 40px; padding-bottom: 40px; }

.last_pb-0:last-child { padding-bottom: 0 }

.w-1\/2	{ width: 50%; }
.w-1\/3	{ width: 33.33333%; }
.w-2\/3	{ width: 66.66667%; }
.w-1\/4	{ width: 25%; }
.w-3\/4	{ width: 75%; }
.w-1\/5	{ width: 20%; }
.w-2\/5	{ width: 40%; }
.w-3\/5	{ width: 60%; }
.w-4\/5	{ width: 80%; }
.w-1\/6	{ width: 16.66667%; }
.w-5\/6	{ width: 83.33333%; }
.w-37_5p { width: 37.5% !important }
.w-full { width: 100%; }
.w-8px { width: 8px !important; }
.w-20px { width: 20px; }
.w-34px { width: 34px; }
.w-36px { width: 36px; }
.w-50px { width: 50px; }
.w-70px { width: 70px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.w-150px { width: 150px; }
.w-170px { width: 170px; }
.w-200px { width: 200px; }
.w-320px { width: 320px; }
.w-480px { width: 480px !important; }
.w-calc-full-30px { width: calc(100% - 30px) }
.w-calc-3\/4-150px { width: calc(75% - 150px) }

.min-w-300px { min-width: 300px; }

.max-w-full { max-width: 100% }
.max-w-200px { max-width: 200px; }
.max-w-600px { max-width: 600px; }

.h-full-modal { height: calc(100vh - 120px); }
.max-h-100px { max-height: 100px }
.max-h-300px { max-height: 300px }

.h-250px { height: 250px; }
.h-500px { height: 500px; }

.h-auto { height: auto !important; }
.h-8px { height: 8px !important; }
.h-11px { height: 11px; }
.h-16px { height: 16px; }
.h-20px { height: 20px; }
.h-30px { height: 30px; }
.h-34px { height: 34px; }
.h-38px { height: 38px; }
.h-50px { height: 50px; }
.h-70px { height: 70px; }
.h-150px { height: 150px; }

.min-h-100px { min-height: 100px; }
.min-h-260px { min-height: 260px!important; }

// floats
.float-right { float: right !important; }
.float-left { float: left; }
.float-none { float: none; }
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

// transitions
.transition-opacity {
  transition: 150ms opacity ease-in-out;
}
.overlay-gray {
  position: relative;
  &:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
  }
}

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto }

// background colors
.bg-orange { background-color: $orange-500; }
.bg-warning { background-color: #FFFBEA; }
.bg-fffeff { background-color: #fffeff }
.bg-tooltip-darker { background-color: darken(#233447, 5%) }

// put these in the correct order please - only from _vars.scss
.bg-grey-10 { background-color: $grey-10 }
.bg-grey-20 { background-color: $grey-20 }
.bg-grey-50 { background-color: $grey-50 }
.bg-grey-80 { background-color: $grey-80 }
.bg-yellow-10 { background-color: $yellow-10 }
.bg-blue-10 { background-color: $blue-10 }
.bg-blue-20 { background-color: $blue-20 }
.bg-red-10 { background-color: $red-10 }

// text colors
.text-info { color: #829AB1; }
.text-white { color: white; }
.text-black { color: $black; }
.text-grey-500 { color: $gray-500; }
.text-grey-darkest { color: $gray-700; }
.text-blue-200 { color: $blue-200 }
.text-blue-500 { color: $blue-500 }
.text-red { color: $red-200 !important; }
.text-deep-red { color: #E12D39 !important; }
.text-orange { color: $orange-500; }
.text-warning { color: #B44D12; }
.text-darkblue { color: #2E405B }
.text-green { color: $green-200 }

// put these in the correct order please - only from _vars.scss
.text-grey-10 { color: $grey-10 }
.text-grey-20 { color: $grey-20 !important }
.text-grey-40 { color: $grey-40 }
.text-grey-50 { color: $grey-50 }
.text-grey-60 { color: $grey-60 }
.text-grey-70 { color: $grey-70 }
.text-grey-80 { color: $grey-80 }
.text-grey-90 { color: $grey-90 !important }

.text-blue-40 { color: $blue-40 !important }
.text-blue-50 { color: $blue-50 !important }
.text-yellow-40 { color: $yellow-40 }
.text-yellow-60 { color: $yellow-60 }
.text-yellow-70 { color: $yellow-70 }
.text-yellow-90 { color: $yellow-90 !important }
.text-green-50 { color: $green-50 }
.text-green-90 { color: $green-90 }
.text-red-50 { color: $red-50 }
.text-red-100 { color: $red-100 }

.text-1em { font-size: 1em !important; }
.text-4px { font-size: 4px; }
.text-10px { font-size: 10px; }
.text-11px { font-size: 11px; }
.text-12px { font-size: 12px !important; }
.text-14px { font-size: 14px !important; }
.text-15px { font-size: 15px; }
.text-16px { font-size: 16px !important; }
.text-18px { font-size: 18px !important; }
.text-20px { font-size: 20px; }
.text-30px { font-size: 30px; }

.max-w-800px\:hidden {
  display: inline-block;

  @media screen and (max-width: 800px) {
    display: none !important;
  }
}

.scroll-x-auto{ overflow-x: auto }
.scroll-y-auto{ overflow-y: auto }
.overflow-auto { overflow: auto }
.scroll-y { overflow-y: auto }

.cursor-default { cursor: default !important }
.cursor-pointer { cursor: pointer !important }
.cursor-help { cursor: help !important }
.rounded-full { border-radius: 50% }
.rounded-4px { border-radius: 4px !important }
.rounded-8px { border-radius: 8px }
.rounded-t-0px { border-top-left-radius: 0; border-top-right-radius: 0;  }
.rounded-t-4px, .rounded-tl-4px { border-top-left-radius: 4px; }
.rounded-t-4px, .rounded-tr-4px { border-top-right-radius: 4px;  }

.border-0 { border: 0 }
.border-green-20 { border: 1px solid $green-20 }
.border-grey-30 { border: 1px solid $grey-30 }
.border-purple-20 { border: 1px solid $purple-20 }
.border-grey-20 { border: 1px solid $grey-20 }

.border-l-blue-20 { border-left: 1px solid $blue-20; }
.border-l-2px { border-left-width: 2px }

.pre-wrap{
  white-space: pre-wrap;
}
.ws-pre{
  white-space: pre;
}

.textarea-no-resize {
  resize: none;
}

.shadow-md { box-shadow: $shadow-md }

/* - overwrite the above - */

.hover_bg-grey-10:hover { background: $grey-10 }
.hover_bg-blue-10:hover { background: $blue-10 }
.hover_opacity-100:hover { opacity: 1 }
.hover_text-red-50:hover { color: $red-50 }

// tablet
@media only screen and (max-width: $tablet-max-width) {
  .tablet_hidden { display: none !important }
  .tablet_block { display: block !important }
  .tablet_mt-10px { margin-top: 10px }
}

// mobile
@media only screen and (max-width: $mobile-max-width) {
  .mobile_block { display: block !important; }
  .mobile_-mx-10px{ margin-left: -10px; margin-right: -10px; }
  .mobile_-mx-20px{ margin-left: -20px; margin-right: -20px; }
  .mobile_mx-0{ margin-left: 0 !important; margin-right: 0 !important; }
  .mobile_mx-15px{ margin-left: 15px; margin-right: 15px; }
  .mobile_-ml-8px { margin-left: -8px }
  .mobile_ml-0 { margin-left: 0px }
  .mobile_mb-5px{ margin-bottom: 5px }
  .mobile_mb-8px { margin-bottom: 8px; }
  .mobile_mb-10px{ margin-bottom: 10px !important }
  .mobile_mb-16px{ margin-bottom: 16px !important; }
  .mobile_mb-20px{ margin-bottom: 20px !important; }
  .mobile_-mt-10px { margin-top: -10px !important }
  .mobile_mt-0 { margin-top: 0px }
  .mobile_mt-5px{ margin-top: 5px }
  .mobile_mt-16px{ margin-top: 16px !important; }
  .mobile_mt-10px{ margin-top: 10px }
  .mobile_mt-20px{ margin-top: 20px }
  .mobile_px-25px { padding-left: 25px !important; padding-right: 25px !important; }
  .mobile_pl-0 { padding-left: 0 !important; }
  .mobile_pr-0 { padding-right: 0 }
  .mobile_text-center { text-align: center }
  .mobile_text-left { text-align: left !important; }
  .mobile_text-right { text-align: right }
  .mobile_font-bold { font-weight: $bold }
  .mobile_w-50px { width: 50px; }
  .mobile_w-220px { width: 220px; }
  .mobile_float-none { float: none !important }
  .mobile_w-full { width: 100% }
  .mobile_w-1_2 { width: 50% }
  .mobile_h-auto { height: auto }
  .mobile_h-full { height: 100% !important; }
  .mobile_mr-0 { margin-right: 0 }
  .mobile_mr-10px { margin-right: 10px }
  .mobile_p-10px { padding: 10px !important; }
  .mobile_p-20px { padding: 20px; }
  .mobile_px-20px { padding-left: 20px; padding-right: 20px; }
  .mobile_pl-10px { padding-left: 10px }
  .mobile_pl-20px { padding-left: 20px }
  .mobile_pb-20px { padding-bottom: 20px }
  .mobile_whitespace-normal { white-space: normal }
  .mobile_flex { display: flex !important }
  .mobile_flex-col { flex-direction: column; }
  .-mobile_flex-order-1 { order: -1; }
  .mobile_justify-start { justify-content: flex-start; }

  // position
  .mobile_relative { position: relative; }
  .mobile_absolute { position: absolute; }

  .mobile_pin-t-20px { top: 20px }
  .mobile_pin-r { right: 0 }
}