@import './cmf-backlog.mixins';

@include iconsFlex;

* {
  --default-doing-color: #3f82d8;
  --default-todo-color: #60b1bb;
  --default-done-color: #23a055;
}

:host {
  display: block;

  &.mass-editing {
    margin-bottom: 40px;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, min-content) 1fr;
  align-items: flex-start;
  padding-bottom: 50px;

  .menu-column {
    position: sticky;
    top: 0;
    width: 20px;
    margin-right: 10px;

    button {
      @include headStyle;

      transform: translate(-35px, 40px) rotate(90deg);
      width: 90px;
      margin-bottom: 70px;

      &:hover {
        background-color: var(--color-gray-eee);
      }
    }

    .collapsed {
      @include collapsed;
    }
  }

  .column {
    height: 100%;

    &:not(.collapsed) {
      @include colBorder;
    }

    .select-container {
      position: sticky;
      top: 0;
      width: 250px;

      /* fixme */
      max-height: calc(100vh - 180px);

      .create-subfilter {
        cursor: pointer;
        color: var(--accent-color-bg);
        text-decoration: underline;
        text-transform: none;
      }
    }

    &.collapsed {
      .select-container {
        @include collapsed;
      }
    }

    .header {
      @include flexCenterBeetween;
      @include headStyle;

      align-items: center;
      padding-left: 5px;

      app-cmf-icon {
        cursor: pointer;
        display: flex;
      }
    }

    .filter-options {
      display: block;
      margin-top: 10px;
    }

    .item {
      $default-border: 1px solid transparent;

      cursor: pointer;

      display: flex;

      padding: 10px 20px 10px 0;

      border-top: $default-border;
      border-bottom: $default-border;

      .label {
        min-width: fit-content;
      }

      .tags {
        display: flex;
        flex-flow: row wrap;
        gap: 5px;

        margin-left: 5px;

        .tag {
          padding: 2px 5px;
          color: var(--color-gray-666);
          background-color: var(--color-gray-eee);
          border-radius: 5px;
        }
      }

      &.all-issues {
        padding-left: 16px;
      }

      &.cdk-drop-list-dragging {
        background-color: var(--color-gray-fff);
        border-color: var(--accent-color-bg);
        border-style: dashed;
      }

      app-cmf-icon {
        position: relative;
        top: 2px;
      }

      &.selected {
        color: #fff;
        background-color: var(--accent-color-bg);
        border-color: #fff;
      }

      &:not(.selected):hover {
        background-color: var(--color-gray-eee);
      }
    }

    .filtered {
      color: var(--color-gray-aaa);
    }
  }

  .backlog-members {
    $margin-right: 48px; // откуда -2 пикселя, бордер чтоль

    .header {
      display: flex;
      align-items: center;

      padding-right: $margin-right;
      padding-left: 20px;

      font-weight: 600;

      .left {
        flex: 1;
      }

      .right {
        display: flex;
        gap: 10px;
        align-items: center;

        .counters {
          display: flex;
          flex-direction: row;
          gap: 10px;

          .estimate {
            flex: none;

            padding: 0 8px;

            font-family: var(--default-font-family);
            font-weight: 400;
            color: #fff;

            border-radius: 15px;
          }

          .open {
            background-color: var(--default-todo-color);
          }

          .in-progress {
            background-color: var(--default-doing-color);
          }

          .closed {
            background-color: var(--default-done-color);
          }
        }
      }
    }

    wg-backlog-task-list {
      display: block;
      margin-right: $margin-right;
      padding: 20px 0 20px 20px;
    }
  }
}

// TODO: научиться отображать список бэклога виджетом frm-cmf-backlog-ext-sprint чтобы убрать копипасту
.create-members {
  @include defaultStylesSubElements;

  cursor: pointer;
  margin-right: 48px;
  padding-left: 20px;

  .label {
    padding-left: 20px;
    color: var(--menu-item-color);
  }

  &:hover {
    color: var(--color-gray-666);
  }
}

.create-members-input {
  @include iconsFlex;

  input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--accent-color-bg);
    outline: none;
  }
}

.management-panel {
  position: fixed;
  z-index: 1;
  bottom: 12px;

  width: stretch;
  margin-right: 30px;
  padding-right: 30px;
}

.filters-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

:host ::ng-deep .column .item .backlog-row {
  display: none;
}

:host ::ng-deep .mat-spinner circle {
  stroke: var(--accent-color-bg);
}

::ng-deep .toolbar-file-loading-spinner.mat-progress-spinner circle {
  stroke: var(--color-gray-444);
}

.backlog-column {
  display: flex;
  flex-direction: column;
}


wg-backlog-kanban-list {
  margin-bottom: 20px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
}

.quick-filters-button-list{
  margin-bottom: 20px;
}

.filter-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
  padding-right: 50px;
  flex-wrap: wrap;

  .filter-editor {
    flex: 1 1 0;
    margin: 0 0 10px;
  }
}

.visibility-settings {
  display: flex;
}

.settings-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex: none;
    height: 36px;
    margin-left: auto;

    button {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}