@use './variables.scss' as vars;

:host {
  display: block;

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

  .gantt__header-name-field {
    line-height: 22px;
  }

  .gantt {
    overflow: hidden;
    max-width: 100%;

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

      h1 {
        margin-top: 6px;
        font-size: 20px;
        flex: 1;
      }

      wg-version-label {
        position: relative;
        top: -4px;
        margin-right: 19px;
      }

      .mode-list {
        @include vars.ganttModeSelect;

        margin-left: auto;
      }

      .mode-gantt {
        @include vars.ganttModeSelect;

        margin: 0 20px;
      }

      .mode-list, .mode-gantt {
        min-height: 41px;
      }

      .gantt-save {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;

        margin-bottom: 7px;
        margin-left: 50px;

        .local-settings-buttons {
          cursor: pointer;

          &.save-button {
            display: flex;
            gap: 10px;
            align-items: center;

            app-cmf-doodle-icon {
              display: flex;
            }

            span {
              color: var(--color-href);
              text-decoration: underline;
            }
          }

          &.cancel-button span {
            color: var(--color-gray-888);
            text-decoration: underline;
          }
        }
      }

      .icon-save-more {
        display: inline-block;
        margin-top: 3px;
      }
    }

    &__layout {
      display: grid;
      grid-template-areas: 'treeGantt xControllerGantt chartGantt';
      border-top: vars.$rowBorder;

      &.layoutResourcePlanning {
        grid-template-areas:
          'treeGantt xControllerGantt chartGantt'
          'yControllerTree  dummy yControllerChart'
          'treeResourcePlanning  xControllerResourcePlanning chartResourcePlanning';
      }

      &__tree {
        position: relative;

        overflow: scroll hidden;
        grid-area: treeGantt;

        width: 100%;

        &_resource_planning {
          position: relative;
          overflow: hidden;
          grid-area: treeResourcePlanning;
          width: 100%;
        }
      }

      &__chart {
        position: relative;
        grid-area: chartGantt;
        flex-grow: 1;

        &_resource_planning {
          position: relative;
          grid-area: chartResourcePlanning;
          flex-grow: 1;
        }
      }

      .resize-controller {
        &-x-gantt {
          @include vars.resizeController(col-resize);

          grid-area: xControllerGantt;
        }

        &-x-resource-planning {
          @include vars.resizeController(col-resize);

          grid-area: xControllerResourcePlanning;
        }

        &-y-tree {
          @include vars.resizeController(row-resize);

          grid-area: yControllerTree;
        }

        &-y-chart {
          @include vars.resizeController(row-resize);

          grid-area: yControllerChart;
        }

        &-dummy {
          @include vars.resizeController(not-allowed);

          grid-area: dummy;
        }
      }

      .controller-position-sticky {
        position: sticky;
      }
    }
  }

  .mat-spinner {
    position: absolute;
    z-index: 9999;
    top: calc(50% - 20px);
    left: calc(50% - 20px);

    &.hidden {
      z-index: -1;
      display: none;
    }
  }

  wg-mass-management-panel {
    position: absolute;
    z-index: 999;
    bottom: 20px;

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

  .more-menu-item {
    display: flex;
    flex-flow: row nowrap;
  }
}

:host ::ng-deep {
  .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: #3d87ff;
  }
}

.mat-button-base {
  padding-top: 2px;
}