@use "../abstracts/mixins";
@use "../base/breakpoints";

$background-outset: 0.5rem;

#tasks,
.tasks,
.subtasks {
  display: flex;
  flex-direction: column;
  margin: 0 var(--section-padding) var(--section-padding) var(--section-padding);
  gap: 0.125rem;

  @media (min-width: breakpoints.$tablet-breakpoint) {
    margin-right: calc($background-outset);
  }
}

.subtasks {
  margin-top: 5px;
  margin-bottom: 0;

  &:empty {
    display: none;
  }
}

#side-panel {
  .jenkins-app-bar {
    margin-left: var(--section-padding);
    margin-right: var(--section-padding);
  }

  & > #tasks > .jenkins-search-container {
    margin: 0 0 1rem #{-$background-outset};

    .jenkins-search__icon {
      width: 2.625rem;
      aspect-ratio: unset;
    }

    .jenkins-search__input {
      padding-left: 2.5rem;
    }
  }
}

#tasks .task {
  margin: 0 0 0 calc($background-outset * -1);
}

#tasks,
.tasks {
  .task .task-link {
    @include mixins.item;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0.6875rem;
    gap: 0.625rem;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    margin: 0;
    transition: opacity var(--standard-transition);
    min-height: 2.375rem;

    .task-icon-link {
      display: inline-flex;

      svg,
      img {
        width: 1.25rem !important;
        height: 1.25rem !important;
        color: var(--text-color);

        * {
          transition: stroke-width var(--standard-transition);
        }
      }
    }

    .task-icon-badge {
      margin-left: auto;
    }

    .task-link-text {
      display: contents;
      word-break: word-break;
    }

    &--active {
      font-weight: var(--font-bold-weight);
      cursor: default;

      svg * {
        stroke-width: 35px;
      }

      &::before {
        background-color: var(--item-background--active) !important;
      }

      &::after {
        box-shadow: none !important;
      }
    }

    &:not(:hover, &:active, &:focus, &--active) {
      &::before {
        border-color: transparent;
      }
    }
  }
}
