$cursor: pointer;
$itemHeight: 34px;
$maxWidth: 100%;
$chevronWidth: 12px;
$defaultColor: var(--color-gray-eee);
$defaultGrayTextColor: var(--color-gray-888);
$activeBtnColor: var(--theme-hack-bg-color, #d3d3d3);
$marginLarge: 10px;
$marginSmall: 1px;
$marginMedium: 3px;

$rowBorder: 1px solid $defaultColor;
$defaultTextColor: var(--color-gray-222);
$lightBlueColor: rgb(152 217 255);
$selectedRowColor: #f4f8ff;

@function iconBorderColor($color) {
  @return 1px solid $color;
}

@mixin editUI() {
  cursor: pointer;
}

@mixin button() {
  cursor: pointer;

  font: var(--default-text-font);
  color: var(--theme-hack-color, #42526f);
  background-color: #091e420b;
  border: iconbordercolor(var(--color-gray-fff));
  border-radius: 3px;
  outline: none;

  &:not(:disabled):hover {
    border: iconbordercolor($defaultColor);
  }
}

@mixin gridColumn() {
  overflow: hidden;
  display: flex;
  align-items: center;

  height: $itemHeight;
  padding: 10px 5px 5px;
  padding-right: 10px;

  border-bottom: $rowBorder;
}

@mixin grad() {
  $color: color-mix(in srgb, var(--color-gray-fff) 70%, transparent);

  .grad {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;

    width: 16px;
    height: $itemHeight;

    /* background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .9) 70%, #fff); */
    background: linear-gradient(to right, hsl(0deg 0% 100% / 0%), var(--color-gray-fff) 70%, var(--color-gray-fff));
  }
}

@mixin value() {
  .value {
    display: inline-block;

    max-width: none;
    padding: 0;

    white-space: nowrap;

    background: transparent;
  }
}

@mixin renderView() {
  .render-view {
    display: inline-block;
    width: 100%;
  }
}

@mixin bordersRound() {
  &.left-round {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &.right-round {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@mixin iconMargins() {
  .margin-large {
    &-l {
      margin-left: $marginLarge;
    }

    &-r {
      margin-right: $marginLarge;
    }
  }

  .margin-small {
    &-l {
      margin-left: $marginSmall;
    }

    &-r {
      margin-right: $marginSmall;
    }
  }

  .margin-medium {
    &-l {
      margin-left: $marginMedium;
    }

    &-r {
      margin-right: $marginMedium;
    }
  }
}

@mixin resizeController($cursor) {
  cursor: $cursor;
  background-color: $defaultColor;

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

@mixin ganttModeSelect() {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 6px 8px 0 8px;
  cursor: pointer;
  border-bottom: 4px solid transparent;

  &:hover {
      border-bottom: 4px solid var(--color-gray-eee);
  }

  &.active {
      border-bottom: 4px solid var(--color-gray-aaa);
  }

  .text {
      font: var(--default-text-font);
      color: var(--theme-hack-color, #42526f);
  }

  .icon {
      position: relative;
      top: 2px;
      margin-right: 5px;
      color: var(--theme-hack-color, #42526f);
  }
}

@mixin ganttRenderViewStatus {
  display: inline-flex;
  padding: 0px 5px;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}