@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base */
h1 {
  @apply .text-4xl .mt-8 .mb-4;
}

h2 {
  @apply .text-3xl .mt-6 .mb-3;
}

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

a:hover {
  @apply .text-blue-800 .underline;
}

hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Inputs */
input[type="text"] {
  @apply .border .border-gray-200 .rounded-sm .px-2 .py-1 .text-sm .h-8;
}
input[type="text"]:focus {
  @apply .border-gray-300 .outline-none;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075),
    0 0 0 0.2em rgba(0, 0, 0, 0.035);
}

input[type="date"] {
  @apply .text-sm .h-8 .w-40 .border .border-gray-200 .rounded-sm .appearance-none .py-1 .pr-3 .pl-2;
}
input[type="date"]:focus {
  @apply .border-gray-300;
}

select {
  @apply .h-8 .appearance-none .border .border-gray-300 .rounded-sm .py-1 .pl-2 .pr-3;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 320 512"><path fill="%23B0B8BE" d="M31 192h258c17 0 26 22 14 34L174 355c-8 8-20 8-28 0L17 226c-12-12-3-34 14-34z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px bottom 7px;
  background-size: 10px;
  min-width: 10rem;
}
select:focus {
  @appy .border-gray-300 .outline-none;
  box-shadow: 0 0 0 0.2em rgba(0, 0, 0, 0.035);
}

/* Buttons */
.ck-admin-btn {
  @apply .inline-flex .items-center .justify-center .border .border-solid .text-sm .px-4 .h-8 .rounded-sm .no-underline .text-gray-700 .bg-white .border-gray-200;
}
.ck-admin-btn i.fa {
  @apply mr-2;
}
.ck-admin-btn.ck-admin-btn--active,
.ck-admin-btn:hover {
  @apply .no-underline .text-gray-800 .bg-gray-50 .border-gray-300;
}
.ck-admin-btn--primary {
  @apply .text-white .bg-red-500 .border-red-500;
}
.ck-admin-btn--primary.ck-admin-btn--active,
.ck-admin-btn--primary:hover {
  @apply .text-white .bg-red-600 .border-red-600;
}
.ck-admin-btn--lg {
  @apply .h-10 .text-base;
}
.ck-admin-btn:focus {
  outline: none;
  border-color: rgba(var(--blue-500-rgb), 0.8);
  box-shadow: rgba(var(--blue-500-rgb), 0.8) 0 0 0 1px;
}

/* Shame */
.table-striped > tbody > tr:nth-of-type(odd) {
  @apply .bg-gray-50;
}

/* Utilities */
@variants focus {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.8);
    box-shadow: rgba(var(--blue-500-rgb), 0.8) 0 0 0 1px;
  }
}

[data-reach-dialog-overlay] {
  background: hsla(0, 0%, 0%, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 51;
}
[data-reach-dialog-content] {
  margin: 27vh auto;
  outline: none;
}
