$fa-font-path: "@fortawesome/fontawesome-free/webfonts/";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/v4-shims";

@import "tailwindcss";
@config "../tailwind.config.js";

$font-family-primary: "Source Sans Pro";
$font-family-secondary: "Oswald";

@layer base {
  @font-face {
    font-family: $font-family-primary;
    src: url(/fonts/SourceSansPro-Regular.ttf);
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: $font-family-primary;
    src: url(/fonts/SourceSansPro-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
  }

  @font-face {
    font-family: $font-family-secondary;
    src: url(/fonts/Oswald-Regular.ttf);
    font-display: swap;
  }

  h1, h2, h3, h4, h5 {
    @apply text-pink-900 font-semibold;
  }

  h1 {
    @apply text-2xl my-2;
    font-family: $font-family-secondary, sans-serif;

    @screen md {
      @apply text-4xl my-4;
    }
  }

  h2 {
    @apply text-xl mt-2;

    @screen md {
      @apply text-2xl mt-4;
    }
  }

  h3 {
    @apply text-base;

    @screen md {
      @apply text-lg;
    }
  }

  p {
    @apply mb-4;
  }

  button, [type="submit"] {
    @apply bg-white border border-red-400 rounded-xs py-2 px-4 my-2;
    @apply text-red-300 text-sm uppercase tracking-wider font-semibold;

    &:focus, &:hover {
      @apply bg-red-400 text-white border-white;
    }
  }

  a {
    @apply text-red-600;

    &:focus, &:hover {
      @apply text-red-400;
    }
  }

  label {
    @apply font-semibold;
  }
}

html, body {
  @apply h-full;
  font-family: $font-family-primary, sans-serif;
}

body {
  @apply antialiased;
  @apply flex flex-col min-h-screen;
  @apply bg-gray-50 text-gray-700;

  /* hide phoenix live reload iframe */
  iframe[hidden] {
    display: none;
  }
}

header {
  @apply text-pink-900;
}

nav {
  @apply flex max-w-screen-xl mx-auto items-center flex-wrap pr-4 py-4;

  @screen sm {
    @apply px-6;
  }
}

main {
  @apply grow;
}

section {
  @apply px-4 max-w-screen-xl w-full mx-auto;
}

footer {
  a {
    @apply text-red-400;

    &:focus, &:hover {
      @apply underline;
    }
  }
}

select.h1 {
  @apply text-2xl;
  font-family: $font-family-secondary, sans-serif;

  @screen md {
    @apply text-4xl;
  }
}

button.plain {
  @apply tracking-normal text-base;
  border: inherit;
  background-color: inherit;
  color: inherit;
  margin: 0;
  text-transform: none;
}

input[type="reset"] {
  @apply rounded-xs py-2 px-4 my-2;
  @apply bg-white border border-gray-400 text-gray-400 text-sm uppercase tracking-wider font-semibold;
  @apply cursor-pointer;

  &:focus, &:hover {
    @apply bg-gray-300 text-white border-white;
  }
}

input[type="text"].search {
  @apply outline-hidden;
  @apply border border-red-400 rounded-full text-red-600;

  &:focus {
    box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.25);
  }
}

nav .nav-link {
  @apply block p-2 mb-1;

  &:hover, &:focus {
    @apply bg-gray-100 rounded-sm text-gray-900;
  }

  @screen md {
    @apply block px-6 py-2 mb-0;

    &:hover, &:focus {
      @apply bg-transparent text-red-400;
    }
  }
}

a, button, input[type="button"] {
  &.button-link {
    @apply rounded-sm px-4 py-2;
    @apply normal-case text-base font-semibold leading-tight tracking-normal;
    @apply bg-white border-2 border-red-200 text-red-600;

    &:focus, &:hover {
      @apply bg-red-400 text-white border-white;
    }

    &.subtle {
      @apply leading-none bg-transparent;

      &:focus, &:hover {
        @apply bg-transparent text-red-400 border-red-200;
      }
    }

    &--inline {
      @apply inline-flex items-center justify-center;
      @apply border-none leading-none bg-transparent;
      @apply p-0 mx-2 my-0;

      &:focus, &:hover {
        @apply bg-transparent text-red-400;
      }
    }

    &.light {
      @apply bg-transparent border-2 border-white text-white;

      &:focus, &:hover {
        @apply bg-white text-red-400 border-red-200;
      }
    }

    &.medium {
      @apply bg-transparent border-2 border-red-300 text-red-300;

      &:focus, &:hover {
        @apply bg-red-400 text-white border-red-300;
      }
    }

    &.dark {
      @apply bg-transparent border-2 border-gray-500 text-gray-600;

      &:focus, &:hover {
        @apply bg-gray-600 text-white border-white;
      }
    }

    &.indented {
      margin: 0 0 0 -3em;
    }

    &.indented-sm {
      margin: 0 0 0 -2.25em;
    }
  }
}

.icon-button {
  @apply inline-flex items-center justify-center;
  @apply cursor-pointer p-2 rounded-full;
  @apply text-white bg-red-300;

  &.hidden {
    display: none;
  }

  svg {
    @apply h-6 w-6 fill-current;
  }

  &:focus, &:hover {
    @apply bg-red-400;
  }
}

.icon-button.disabled {
  @apply text-gray-300 bg-transparent;
  @apply cursor-default py-2 px-0;
}

.card-item {
  .icon-button {
    &:not(.disabled) {
      @apply text-gray-100 bg-gray-500;
    }

    &.subtle {
      @apply text-gray-400 bg-transparent border-transparent;
      @apply w-5 py-2 my-0 px-0;

      &:focus, &:hover {
        @apply bg-gray-500 bg-transparent;
      }
    }
  }

  .emphasize {
    @apply text-red-400;
  }

  &:focus, &:hover {
    .icon-button {
      &:not(.disabled) {
        @apply text-white bg-gray-600;

        &:focus, &:hover {
          @apply text-white bg-red-400;
        }
      }

      &.subtle {
        @apply text-gray-500 bg-transparent;

        &:focus, &:hover {
          @apply text-red-300 bg-transparent;
        }
      }
    }

    .emphasize {
      @apply text-red-400;

      &:focus, &:hover {
        @apply text-red-300;
      }
    }

    input[type="reset"] {
      @apply border-gray-400 text-gray-500;

      &:focus, &:hover {
        @apply bg-gray-400 text-white border-white;
      }
    }

    button {
      @apply text-red-400;

      &:focus, &:hover {
        @apply bg-red-400 text-white border-white;
      }
    }
  }
}

.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}

.phx-disconnected {
  $dark: #702459;
  $bright: #fc8181;

  h1, select {
    -webkit-animation: color-change 0.8s infinite;
    -moz-animation: color-change 0.8s infinite;
    -o-animation: color-change 0.8s infinite;
    -ms-animation: color-change 0.8s infinite;
    animation: color-change 0.8s infinite;
  }

    @-webkit-keyframes color-change {
        0% { color: $dark; }
        50% { color: $bright; }
        100% { color: $dark; }
    }
    @-moz-keyframes color-change {
        0% { color: $dark; }
        50% { color: $bright; }
        100% { color: $dark; }
    }
    @-ms-keyframes color-change {
        0% { color: $dark; }
        50% { color: $bright; }
        100% { color: $dark; }
    }
    @-o-keyframes color-change {
        0% { color: $dark; }
        50% { color: $bright; }
        100% { color: $dark; }
    }
    @keyframes color-change {
        0% { color: $dark; }
        50% { color: $bright; }
        100% { color: $dark; }
    }
}

.w-max-content {
  width: max-content;
}

.text-hyphen {
  hyphens: auto;
}

/* Reset some styles for markdown rendering, because the headlines
   and margins would be too large in the inline descriptions */
.markdown {
  h1, h2, h3, h4, h5, h6 {
    @apply text-base font-semibold text-pink-900 m-0;
    font-family: $font-family-primary, sans-serif;
  }

  p {
    @apply mb-2;
  }

  pre, code, p {
    font-family: $font-family-primary, sans-serif;
    @apply break-normal whitespace-normal;
  }
}

details summary {
  @apply cursor-pointer;
}

details.toggle {
  summary {
    @apply list-none cursor-pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  &[open] {
    summary {
      &::before {
        @apply cursor-default bg-transparent;
        @apply fixed block top-0 right-0 bottom-0 left-0;
        content: " ";
      }
    }
    .toggle-content {
      z-index: 1;
    }
  }
}

.cookies-box {
  border-top: 1px solid #fff;
  a {
    right: 2rem;
  }
}

.focused-anchor {
  -webkit-animation: color-fade 1.5s;
  -moz-animation: color-fade 1.5s;
  -o-animation: color-fade 1.5s;
  -ms-animation: color-fade 1.5s;
  animation: color-fade 1.5s;
}

$focused-bg-color: lighten(#F56565, 10%);

@-webkit-keyframes color-fade {
  0% { background-color: inherit; }
  20% { background-color: $focused-bg-color; }
  100% { background-color: inherit; }
}
@-moz-keyframes color-fade {
  0% { background-color: inherit; }
  20% { background-color: $focused-bg-color; }
  100% { background-color: inherit; }
}
@-ms-keyframes color-fade {
  0% { background-color: inherit; }
  20% { background-color: $focused-bg-color; }
  100% { background-color: inherit; }
}
@-o-keyframes color-fade {
  0% { background-color: inherit; }
  20% { background-color: $focused-bg-color; }
  100% { background-color: inherit; }
}
@keyframes color-fade {
  0% { background-color: inherit; }
  20% { background-color: $focused-bg-color; }
  100% { background-color: inherit; }
}
