@use "../vendor/bulma";

.ticket-item {
  @extend .is-flex;
  @extend .mb-1;
  @extend .pt-1;
  @extend .pb-2;
  @extend .is-align-items-flex-start;
  border-bottom: 1px solid var(--bulma-text-90);

  .ticket-icon {
    @extend .mr-2;
    display: flex;
    align-items: baseline;

    .checkbox {
      margin-right: 0.5rem;
    }
  }

  .ticket-content {
    @extend .is-flex;
    @extend .is-flex-direction-column;
    @extend .is-flex-grow-1;
    align-self: baseline;

    .ticket-header {
      @extend .is-flex;
      @extend .is-justify-content-flex-start;
      @extend .is-flex-wrap-wrap;
      @extend .mb-1;
      align-items: center;

      .ticket-title {
        @extend .title;
        @extend .mb-0;
        @extend .is-5;
        font-weight: normal;
      }

      .tags {
        @extend .ml-2;
      }
    }

    .ticket-meta {
      @extend .is-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.25rem;

      p {
        @extend .subtitle;
        @extend .is-6;
        font-weight: 300;
        margin: 0;
      }
    }
  }
}