.card {
  @apply bg-transparent border-0;

  .table-scroll {
    @apply bg-white rounded;
  }

  .table {
    @apply w-full;
  }

  .card-divider .card-title {
    @apply flex items-center;

    .button {
      @apply ml-auto relative;
    }
  }
}

.card-title {
  @apply text-md w-full text-gray-2 font-semibold;

  &--nocaps {
    @apply lowercase tracking-normal;

    &::first-letter {
      @apply lowercase;
    }
  }

  .data-picker {
    @apply font-normal tracking-normal mb-0 normal-case;
  }

  .button--title {
    @apply flex justify-end gap-x-4 items-center ml-auto;

    .dropdown,
    &.dropdown {
      @apply relative;
    }
  }
}

.card__filter {
  @apply ml-auto flex items-center gap-x-4 font-normal;

  a {
    @apply text-md text-secondary font-semibold underline;
  }
}

.card-footer {
  padding: 1rem;
  border-top: 1px solid rgba(black, 0.1);

  .button--remove {
    margin-left: auto;
  }
}

.card--list__item {
  display: flex;
  align-items: center;
  padding-left: 1rem;

  .card--list--mini & {
    padding-left: 1rem;
  }
}

.card--list__icon {
  display: none;
  fill: currentColor;
}

.card--list__text {
  flex-grow: 1;
  flex-shrink: 1;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  padding: 1rem 1rem 1rem 0;

  .card--list--mini & {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .author {
    margin-top: 0.3rem;
    margin-right: 1rem;
  }
}

.card--list__heading {
  margin-bottom: 0;
  display: block;
}

.card-divider {
  @apply bg-transparent px-0 py-2;
}

.card-section {
  @apply pb-4 bg-white;
}

.fcell .label {
  @apply p-2;
}

.card-section-draggable-list {
  .grid-x.grid-margin-x.card-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;

    .cell {
      @apply w-full;
    }
  }

  .cell,
  .card,
  .card-section {
    @apply h-full;
  }

  .draggable-list {
    @apply p-0 m-0 list-none h-full;

    &-title {
      @apply text-lg font-semibold;
    }

    &.dragging {
      @apply border-dashed border-y-2 border-gray;
    }

    li {
      @apply cursor-move py-2;
    }

    svg {
      @apply inline-block fill-secondary;
    }

    .draggable-content {
      @apply flex justify-between items-center font-semibold py-2 px-4 rounded bg-gray-3;
    }
  }
}

.admin-terms-of-service {
  h2 {
    @apply text-md w-full text-gray-2 font-semibold;
  }

  p {
    @apply my-2;
  }

  ol {
    @apply list-decimal ml-4;
  }
}

.code-block {
  @apply font-normal text-gray-2 block overflow-auto whitespace-pre p-4 mb-6 bg-gray-3;

  font-family: Consolas, "Liberation Mono", Courier, monospace;
}