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

:host {
  @include vars.grad;
  @include vars.value;

  display: contents;

  // TODO;
  font-size: 13px;

  .value {
    cursor: pointer;
  }

  app-cmf-icon {
    display: flex;
  }

  .grad.drag-active {
    transform: translateX(-99999);
  }

  .cursor-line {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: none;

    width: 2px;
    height: 100%;

    background-color: vars.$lightBlueColor;

    &.active {
      will-change: left;
      display: block;
    }
  }

  .header-column {
    @include vars.gridColumn;

    position: relative;
    font-size: 13px;
    border-right: 1px solid var(--color-gray-fff);

    &:not(.idx, .icon-drag, .disable-hover) {
      cursor: pointer;
    }

    &.name {
      padding-left: 15px;
    }

    &.mass-task-edit-mode {
      mat-checkbox {
        padding-bottom: 2px;
        padding-left: 4px;
      }
    }

    &:hover:not(.disable-hover) {
      background-color: vars.$defaultColor;
    }

    .drag-active {
      background-color: vars.$defaultColor;
    }

    mat-checkbox {
      padding-right: 5px;
    }

    &.idx {
      width: 40px;
    }

    &.icon-drag {
      width: 25px;
    }

    &.idx,
    .value {
      font-weight: 600;
      color: vars.$defaultGrayTextColor;
    }

    .draggable-line {
      cursor: col-resize;

      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;

      width: 5px;
      height: 100%;

      background-color: transparent;

      &:hover,
      &.active {
        background-color: vars.$lightBlueColor;
      }
    }
  }

  .custom-column-indicators {
    margin-top: 3px;
  }

  .dropdown-position-sticky {
    position: sticky;
    z-index: 10;
    top: 0;
    right: 0;

    justify-content: flex-end;

    // background: linear-gradient(to right, rgba(255,255,255,0.2), 10%, rgba(255,255,255,1));
    background: linear-gradient(to right, var(--color-gray-fff), 10%, var(--color-gray-fff));

    &:hover {
      // background: linear-gradient(to right, rgba(255,255,255,0.2), 10%, rgba(255,255,255,1));
    }
  }

  .drag-active {
    background-color: vars.$defaultColor;
  }
}