/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

body {
  @apply text-dusty-blue-darkest text-base;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-headline;
}

/**
 * Logo
 */

.logo {
  @apply block;
  width: 99px;
  height: 20px;
}

.logo-sm {
  width: 89.1px;
  height: 18px;
}

/**
 * Form Inputs
 */

.input-label {
  @apply text-sm font-bold text-dusty-blue-darker pb-2 block;
}

.input-field {
  @apply text-dusty-blue-darker border-2 rounded-lg p-3 w-full;
}

.input-field::placeholder {
  @apply text-dusty-blue-dark opacity-50;
}

.input-field:focus,
.input-field:focus-within {
  @apply border-turquoise;
  outline: none;
}

.input-field-error {
  @apply border-red;
}

.input-field-error:focus,
.input-field-error:focus-within {
  @apply border-red;
}

.form-errors {
  @apply mt-2 text-sm text-red font-bold;
}

/**
 * Checkboxes and radios
 *
 * Borrowing from @mdo's http://wtfforms.com/
 */

.control {
  @apply flex items-center;
  position: relative;
  cursor: pointer;
}

.control input {
  position: absolute;
  opacity: 0;
  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}

.control-indicator {
  @apply flex-no-grow flex-no-shrink;
  @apply w-6 h-6;
  @apply border-dusty-blue border-2;
  @apply mr-3;
  display: block;
  line-height: 1rem;
  font-size: 65%;
  color: #eee;
  text-align: center;
  background-size: 65%;
  background-position: center center;
  background-repeat: no-repeat;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Focus */
.control input:focus ~ .control-indicator {
  /* @apply .border-turquoise; */
}

/* Checked state */
.control input:checked ~ .control-indicator {
  @apply bg-blue text-white border-blue;
}

/* Active */
.control input:active ~ .control-indicator {
  @apply bg-blue-dark text-white border-blue-dark;
}

/* Disabled */
.control input:disabled ~ .control-indicator {
  @apply opacity-50;
}

/* Checkbox modifiers */
.checkbox .control-indicator {
  @apply rounded;
}

.checkbox input:checked ~ .control-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M5.20018971,8.67665709 L13.8460109,0 L16,2.16167145 L7.35417882,10.8383285 L5.20018971,13 L0,7.78126346 L2.15398911,5.619592 L5.20018971,8.67665709 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Radio modifiers */
.radio .control-indicator {
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
.radio input:checked ~ .control-indicator {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
}

/**
 * Post composer
 */

.composer {
  @apply block relative; /* p-3 bg-grey-light w-full rounded-xl; */
}

.composer:focus,
.composer:active,
.composer:focus-within {
  /* @apply border-turquoise; */
}

post-editor {
  @apply block relative;
}

post-editor.dragging-over > * {
  box-shadow: inset 0 0 0 2px config('colors.blue');
}

/**
 * Buttons
 */

.btn {
  @apply rounded-full px-6 py-3 font-bold text-white border-2 whitespace-no-wrap cursor-pointer text-center inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  line-height: 1.15;
}

.btn-flex {
  @apply flex items-center;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  @apply cursor-not-allowed opacity-75;
}

.btn-xs {
  @apply px-3 py-0 text-sm border h-6;
}

.btn-sm {
  @apply px-4 py-1 text-sm;
}

.btn-md {
  @apply px-5 py-2 text-md;
}

.btn-blue {
  @apply bg-blue border-blue;
}

.btn-green {
  @apply bg-green border-green;
}

.btn-red {
  @apply bg-red border-red;
}

.btn-blue:hover {
  @apply bg-blue-dark border-blue-dark;
}

.btn-turquoise-outline {
  @apply bg-transparent border-turquoise text-turquoise-dark;
}

.btn-turquoise-outline:hover {
  @apply border-turquoise-dark text-turquoise-dark;
}

.btn-grey-outline {
  @apply bg-transparent text-dusty-blue-dark;
}

.btn-turquoise-inverse {
  @apply bg-white border-white text-turquoise-dark;
}

.btn-dusty-blue-inverse {
  @apply bg-white border-white text-dusty-blue;
}

.btn-dusty-blue-inverse:hover {
  @apply bg-grey-lighter;
}

.btn-blue-inverse {
  @apply bg-white border-white text-blue;
}

.btn-blue-inverse:hover {
  @apply bg-grey-lighter;
}

.btn-checked {
  @apply pl-8 bg-no-repeat select-none;
  background-position: 0.5rem center;
  background-image: url("data:image/svg+xml,%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M5.20018971,8.67665709 L13.8460109,0 L16,2.16167145 L7.35417882,10.8383285 L5.20018971,13 L0,7.78126346 L2.15398911,5.619592 L5.20018971,8.67665709 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/**
 * Avatars
 */

.avatar {
  @apply w-9 h-9 text-base;
  @apply bg-dusty-blue;
  @apply rounded-full;
  @apply flex items-center justify-center;
  @apply font-bold text-white select-none;
}
.avatar-tiny {
  @apply w-6 h-6 text-xs;
}
.avatar-md {
  @apply w-12 h-12 text-lg;
}

.avatar-xl {
  @apply w-16 h-16 text-3xl;
}

/**
 * Markdown Documents
 */

.markdown {
  @apply leading-normal;
}

.markdown h1 {
  @apply font-sans text-2xl mb-4 font-bold;
}

.markdown h2 {
  @apply font-sans text-xl mb-4 mt-6 font-bold;
}

.markdown h2:first-child {
  @apply mt-0;
}

.markdown h3 {
  @apply font-sans text-lg mb-4 mt-6 font-bold;
}

.markdown h3:first-child {
  @apply mt-0;
}

.markdown p {
  @apply mb-4;
}

.markdown *:last-child {
  @apply mb-0;
}

.markdown ul,
.markdown ol {
  @apply mb-4;
}

.markdown pre {
  @apply mb-4 p-3 bg-grey-lighter rounded overflow-auto;
}

.markdown code {
  @apply mx-1 px-2 py-1 bg-grey-lighter rounded;
}

.markdown pre code {
  @apply m-0 p-0 bg-transparent rounded-none;
  word-wrap: normal;
  overflow: visible;
}

.markdown img,
.markdown img:last-child {
  @apply my-2 rounded-lg;
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.4);
}

.markdown a {
  @apply text-blue no-underline;
}

.markdown blockquote {
  @apply relative px-4 py-1 mb-4 text-dusty-blue-darker;
}

.markdown blockquote::before {
  @apply block absolute w-1 h-full pin-l pin-t bg-turquoise rounded-full;
  content: "";
}

.markdown blockquote:last-child {
  @apply mb-4;
}

.markdown mark {
  @apply px-3/2 py-1/2 rounded-lg bg-gold text-gold-dark font-bold;
}

/**
 * Markdown on marketing site
 */

.marketing-markdown h1 {
  @apply mb-8 font-headline font-bold tracking-tight leading-tight text-4xl;
}

@screen sm {
  .marketing-markdown h1 {
    @apply tracking-tight leading-tightest text-6xl;
  }
}

.marketing-markdown h2 {
  @apply text-3xl;
}

.marketing-markdown h3 {
  @apply text-2xl;
}

.marketing-markdown p {
  @apply mb-6 text-dusty-blue-darker;
}

.marketing-markdown ul,
.marketing-markdown ol {
  @apply mb-6 text-dusty-blue-darker;
}

.marketing-markdown pre {
  @apply mb-6;
}

a.tagged-group {
  @apply text-dusty-blue-dark no-underline;
}

a.tagged-group:hover {
  @apply text-blue;
}

a.user-mention,
.user-mention {
  @apply text-dusty-blue-dark no-underline;
}

a.user-mention:hover {
  @apply text-blue;
}

/**
 * Tribute.js styles (@-mention / #-tag completion)
 */

.tribute-container {
  @apply absolute block pin-b pin-l p-1 overflow-auto z-40 shadow-md bg-white rounded-lg w-full;
  height: auto;
  max-height: 300px;
  transform: translateY(100%);
}

.tribute-pin-t .tribute-container {
  @apply pin-t;
  bottom: inherit;
  transform: translateY(-100%);
}

.tribute-container ul {
  @apply list-reset;
}

.tribute-container li {
  @apply font-sans font-antialised;
  @apply px-3 py-1 cursor-pointer border-grey-light;
  @apply text-dusty-blue-darker;
  @apply rounded;
}

.tribute-container li:last-child {
  @apply border-none;
}

.tribute-container li.highlight, .tribute-container li:hover {
  @apply bg-grey-light border-transparent text-dusty-blue-darkest;
}

.tribute-container li span {
  @apply font-bold;
}

.tribute-container li.no-match {
  @apply cursor-default;
}

.tribute-container .menu-highlighted {
  @apply font-bold;
}

/**
 * Marketing site common styles
 */

.marketing-headline {
  @apply mb-8 font-bold tracking-tight leading-tight text-5xl text-dusty-blue-darkest;
}

@screen sm {
  .marketing-headline {
    @apply text-7xl;
  }
}

.marketing-sub-head {
  @apply mt-12 mb-6 tracking-semi-tight font-bold leading-tight text-dusty-blue-darkest;
}

.marketing-screenshot {
  @apply block rounded border-grey max-w-full w-auto h-auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 0 0 1px config('colors.grey'), 0 0 30px 0 rgba(0,0,0,0.1);
}

.marketing-long-form p,
.marketing-long-form ul {
  @apply mb-6 text-dusty-blue-darker;
}

.banknote-bg {
  background-color: #f5f6f7;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23e3e1e7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.flash {
  transform: translateX(-50%);
}

/**
 * React button
 */

.react-button {
  position: relative;
  cursor: pointer;
}

.react-button:hover .reactors,
.reactors:hover {
  transform: translateY(10px);
  visibility: visible;
  opacity: 1;
}

.reactors {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transform: translate3d(0, 0, 0);
  pointer-events: none;

  @apply px-2 py-1 z-50 bg-dusty-blue-darker rounded text-left leading-normal;
  @apply w-48;

  top: 100%;
  bottom: auto;
  left: 0;
}

.reactors.no-reactors {
  @apply w-24 text-center;
}

/**
 * Tooltips
 *
 * Based on this technique: https://chrisbracco.com/a-simple-css-tooltip/
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:after,
.tooltip:hover:after{
  visibility: visible;
  opacity: 1;
}


/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  @apply px-2 py-1 z-50 bg-dusty-blue-darker rounded text-xs font-bold text-white text-center leading-normal;
  width: 100px;
  content: attr(data-tooltip);
}

.tooltip.tooltip-wide:after {
  width: 120px;
}

/* Directions */

/* Top (default) */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -50px;
}

.tooltip.tooltip-wide:after,
.tooltip-top.tooltip-wide:after {
  margin-left: -60px;
}

[data-tooltip]:hover:after,
.tooltip:hover:after,
.tooltip-top:hover:after, {
  transform: translateY(-10px);
}

/* Left */
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:hover:after {
  transform: translateX(-10px);
}

/* Bottom */
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:hover:after {
  transform: translateY(10px);
}

/* Right */
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:hover:after {
  transform: translateX(10px);
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -13px;
}

/**
 * Emoji reactions
 */

.emoji-reaction {
  @apply h-7 bg-transparent rounded-full text-center;
  line-height: 1.75rem;
  min-width: 1.75rem;
}

/**
 * Emojis appear smaller on hi-dpi screens, so we need to boost the size up a notch.
 * They also get shifted to the left slightly, so we need to add a little left padding.
 * This media query is borrowed from github.com.
 */
@media not all, only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
  .emoji-reaction {
    @apply pl-1 text-xl;
  }
}

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

.font-antialised {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.selection-turquoise::selection,
.selection-turquoise *::selection {
  background-color: #73f1ff;
}

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

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

.max-w-400px {
  max-width: 400px;
}

.no-outline {
  outline: none;
}

.no-outline:focus {
  outline: none;
}

.placeholder-blue::placeholder {
  @apply text-dusty-blue-dark opacity-50;
}

 /* Borrowed from https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.invisible-file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.transition-bg {
  transition: background-color 0.2s ease;
}

.scrolled-top .scrolled-top-no-border {
  @apply border-transparent;
  box-shadow: none;
}

.link-reset {
  color: inherit;
  text-decoration: inherit;
}

.transition-w {
  transition: width 0.3s;
}

.transition-opacity {
  transition: opacity 0.3s;
}

.focus-within-outline:focus-within {
  @apply bg-white;
  box-shadow: inset 0 0 0 2px config('colors.grey');
}

.pin-l-50 {
  left: 50%;
}

.-pin-l-50 {
  left: -50%;
}

/* Pin right below the mobile top bar */
.pin-t-mobile {
  top: 62px;
}

.-pin-b-1px {
  bottom: -1px;
}

.outline-grey {
  box-shadow: 0 0 0 1px config('colors.grey');
}

.tilt-2deg {
  transform: rotate(2deg);
}

.trans-border-b-grey {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.09);
}

.last-child\:border-none:last-child {
  border: 0;
}

.last-child\:mb-0:last-child {
  margin-bottom: 0;
}


.translate-y-1 {
  transform: translateY(1px);
}

.active\:translate-y-1:active {
  transform: translateY(1px);
}

.table-collapse {
  border-collapse: collapse;
}
