src/components/Tag/TagPicker.css

Summary

Maintainability
Test Coverage
.TagPicker {
  width: 200px;
  padding: 8px 12px 12px 12px;
  cursor: auto;
  text-align: left;
  font-weight: 400;

  @apply z-10;
  @apply bg-gray-700;
  @apply rounded-lg;
  @apply shadow-md;

  &__input {
    font-size: 14px;
    padding: 0 0 8px;

    & > input {
      @apply bg-gray-200;
      border-radius: var(--radius-md);
      padding: 2px 8px;
      width: 100%;
    }

    & > input:focus-visible {
      outline: solid 2px var(--indigo-300);
    }
  }

  &__history {
    border-top: solid 1px #9ca3af;
    margin-top: 12px;
    padding-top: 6px;
    padding-bottom: 2px;
    max-height: 176px;
    overflow-y: auto;
    color: #e2e8f0;
    font-size: 12px;
  }

  .TagButton {
    margin-top: 6px;
  }

  &__label {
    color: #e2e8f0;
    font-size: 10px;
    display: block;
    margin: 0 0 2px 4px;
  }
}