@import 'cmf-planner-mixins';

:host {
  display: flex;
  flex-direction: column;
  gap: 10px;

  // TODO: постоянный хак для деска
  height: calc(100vh - 66px);

  // TODO: временный хак для деска
  margin-left: -10px;

  // TODO: Хак для темы Jira / Confluence Убрать после рефакторинга верстки контейнеров в project, desk
  &.displaced {
    height: calc(100vh - 116px);
  }

  .header {
    display: flex;
    flex-direction: column;
    gap: 10px;

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

      width: 100%;
      min-height: 54px;
      padding-right: 10px;

      border-bottom: 1px solid var(--color-gray-eee);

      .title {
        margin-right: auto;
        font-size: 24px;
      }

      .mode-select {
        @include planner-mode-select;
      }

      .options-button {
        @include planner-button;
      }
    }

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

      .action-button {
        @include planner-button;
      }

      .dates-range {
        display: flex;
        align-self: flex-start;

        height: 32px;

        border: 1px solid var(--color-gray-eee);
        border-radius: 4px;

        .action {
          cursor: pointer;

          display: flex;
          align-items: center;
          justify-content: center;

          padding: 0 8px;

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

        input {
          padding: 0 8px;

          font-weight: bold;

          border-top: none;
          border-right: 1px solid var(--color-gray-eee);
          border-bottom: none;
          border-left: 1px solid var(--color-gray-eee);
          outline: none;
        }
      }

      .today-btn {
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;

        height: 32px;
        padding: 0 8px;

        font-weight: bold;

        border: 1px solid var(--color-gray-eee);
        border-radius: 4px;

        &.disabled {
          cursor: not-allowed;
          color: var(--color-gray-666);
          border: none;
        }
      }

      wg-dropdown-selector {
        overflow: hidden;
        flex: 1;

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

          height: 32px;
          padding: 0 8px;

          border: 1px solid var(--color-gray-eee);
          border-radius: 4px;

          .selected-persons {
            overflow: hidden;
            display: flex;
            flex: 1;
            align-items: center;

            height: 100%;

            .placeholder {
              overflow: hidden;
              color: var(--color-gray-666);
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .persons-container {
              overflow: hidden;
              width: 100%;
              text-overflow: ellipsis;
              white-space: nowrap;

              .person {
                display: inline-flex;
                align-items: center;
                justify-content: space-between;

                width: 160px;
                margin-right: 10px;
                padding: 0 5px;

                background-color: var(--color-gray-eee);
                border: 1px solid var(--color-gray-aaa);
                border-radius: 2px;

                .name {
                  overflow: hidden;
                  padding-left: 5px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .close-icon {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }

  .card {
    height: 40px;
  }

  wg-planner-days {
    overflow: auto;
  }
}

app-cmf-icon,
:host::ng-deep app-cmf-doodle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}