@use "../variables" as *;

.ticket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: $spacing-lg;

  li {
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: $border-radius-lg;
    background: $color-container;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    @media (prefers-color-scheme: dark) {
      background: $color-container-dark;
    }

    h3 {
      margin-top: 0;
      margin-bottom: $spacing-md;
      color: $color-primary;

      a {
        color: $color-primary;
        text-decoration: none;
        transition: color 0.2s ease-in-out;

        &:hover {
          color: $color-primary-hover;
          text-decoration: underline;
        }
      }
    }

    p {
      margin: 0.3rem 0;
    }

    &.To-Do {
      border-left-color: $color-status-todo-text;
    }

    &.InProgress {
      border-left-color: $color-status-inprogress-text;
    }

    &.Completed {
      border-left-color: $color-status-done-text;
    }

    &.Archived {
      border-left-color: $color-status-archived-text;
    }
  }
}

.ticket-list-actions {
  display: flex;
  gap: $spacing-md;
  flex-wrap: wrap;
  margin-top: $spacing-lg;

  a {
    display: inline-block;
    padding: $spacing-md $spacing-lg;
    background: $color-primary;
    color: white;
    text-decoration: none;
    border-radius: $border-radius;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;

    &:hover {
      background-color: $color-primary-hover;
    }
  }
}