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

table {
  @apply divide-y divide-gray-200;
  
  tr {
    @apply bg-white;
  }

  th {
    @apply border border-black border-collapse px-3 py-2 text-left text-sm
          text-gray-600  bg-white;
  }

  td {
    @apply border border-black border-collapse px-3 py-2 text-sm text-black;
  }
}



/* .section conflicts with bulma.io used in mission control */

section,
.actions {
  @apply mt-6;
}

a {
  @apply text-blue-500 no-underline cursor-pointer hover:bg-white hover:text-black;
}

h1 {
  @apply text-5xl;
}

h2 {
  @apply text-4xl;
}

h3 {
  @apply text-3xl;
}

h4 {
  @apply text-2xl;
}

h5 {
  @apply text-xl;
}

p {
  @apply mt-4;
}

th.sequence {
  @apply w-16 px-2 text-center;
}

td.sequence {
  text-align: center;
}

.table {
  display: table;
  padding: 10px;
}

.tr {
  display: table-row;
  padding: 10px;
}

.th {
  display: table-cell;
  padding: 10px;
  border: black solid 1px;
  text-transform: uppercase;
}

.td {
  display: table-cell;
  padding: 10px;
  border: black solid 1px;
}

div.field,
div.actions {
  margin-bottom: 0.75rem;
}

label {
  @apply mt-8 font-bold block;
}

[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  color: green;
}

[type="checkbox"]:disabled {
  color: green;
  opacity: 0.5;
}

[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"] {
  @apply mt-1 block w-96 rounded-md bg-white border-gray-500 focus:border-2 focus:bg-white focus:ring-0;
}

textarea,
select,
[multiple] {
  @apply mt-1 block w-96 rounded-md bg-white border-gray-500 focus:border-2 focus:bg-white focus:ring-0;
}

input:disabled {
  background: #dddddd;
}

button {
  @apply focus:outline-none;
}

.btn-primary {
  @apply py-3 px-6 text-base text-black rounded-md no-underline cursor-pointer
       bg-uproarOrange hover:bg-uproarOrangeDark focus:outline-none disabled:bg-gray-400 disabled:cursor-not-allowed;
}


.btn-secondary,
[type="submit"] {
  @apply py-3 px-6 text-base text-white rounded-md no-underline cursor-pointer
         bg-uproarGreen hover:bg-uproarGreenDark focus:outline-none;
}


.btn-danger {
  @apply py-1 px-2 text-sm text-white hover:text-white rounded-md no-underline cursor-pointer
         bg-danger hover:bg-dangerDark focus:outline-none;
}

[x-cloak] {
  display: none;
}

#notice {
  color: green;
}

.field_with_errors {
  @apply flex flex-col items-stretch;
}

.field_with_errors label {
  color: red;
}

#error_explanation {
  @apply w-full border-2 border-red-600 p-4 my-4 bg-gray-100 rounded;
}

#error_explanation h2 {
  @apply text-base font-bold text-red-600;
}

#error_explanation ul li {
  @apply text-base ml-4 list-disc;
}

.gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: transparent;
  margin-top: 2rem;
  .gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem 1rem 0;
    img {
      width: 200px;
      height: auto;
      border: 0;
    }
    .remove {
      font-size: large;
      cursor: pointer;
    }
  }
}

.tagsContainer {
  display: flex;
  flex-wrap: wrap;
  .pill {
    font-size: small;
    padding: 0.3rem 0.7rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    border-radius: 1rem;
    background-color: #007165;
    color: white;
  }
}

.error {
  width: 100%;
  color: red;
  text-align: center;
}

.video-dropzone {
  width: 100%;
  min-height: 200px;
  border: 2px dotted darkgray;
  border-radius: 1rem;
  margin: 3rem 0 3rem 0;
  .over {
    background-color: #eeffee;
    cursor: pointer;
  }
  .msg {
    margin-top: 75px;
    text-align: center;
  }
}

.grip {
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}

.sortable-ghost {
  background-color: lightyellow;
}

.list-line-even {
  background-color: lightyellow;
}

.pagination {
  > * {
    /* styles for direct children */
    margin: 0 5px;
  }
}