@import "ember-power-select";
@tailwind base;
@tailwind components;
@tailwind utilities;

p {
  @apply py-2;
}

h2 {
  @apply text-3xl;
  @apply py-4;
}

h4,
h3 {
  @apply text-2xl;
  @apply py-4;
}

a {
  @apply no-underline;
  @apply text-red-700;
  @apply text-lg;

  &:hover {
    @apply underline;
  }
}

.input-field-example{
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  width: 100%;
}

.nav-sidebar-item{
  a{
    &,
    &:active,
    &:link,
    &:focus,
    &:hover{
      transition: color 1s linear;
    }
  }
  &.current{
    a{
      &,
      &:hover,
      &:link,
      &:focus{
        font-weight: 700;
        color: #222;
      }
    }
  }
}

@keyframes fadein{
  from{
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}

.fade-in-element{
  animation-duration: 2s;
  animation-name: fadein;
  animation-iteration-count: infinite;
}

.main-sidebar {
  min-height: 70vh;
}

// Override addon styles while I learn how it works
.documentation-hero .docs-max-w-sm.docs-mx-auto{
  max-width: 100%;
}

// TESTS

#tests-body {
  background: #fff;
}
