@import '../../../styles/common.scss';

.container {
  box-sizing: border-box;

  position: relative;
  display: grid;
  width: 100%;

  display: grid;
  padding: 1px 0px 1px 0px;
  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);

  border-bottom: var(--dynamic-list-row-border, $dynamic-list-row-border);

  > .wrapper:first-child {
    padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
  }

  &.dragging {
    border-bottom: 0;
  }

  justify-items: left;
  align-items: center;

  .wrapper {
    min-height: var(--dynamic-list-row-height, $dynamic-list-row-height);
    min-width: 100%;
    display: grid;
    align-items: center;
    border: 1px solid transparent;
  }

  &:hover .editable {
    border: 1px solid var(--input-hover-color, $input-hover-color);
    padding: 0 12px;
  }

  .column {
    max-width: 100%;
    max-height: 100%;

    span {
      padding: 5px 0;
      display: grid;
    }

    &.nowrap {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .position,
  .actionButton {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

    align-items: center;
  }

  // hover background color
  &:hover {
    background-color: var(
      --dynamic-list-row-hover-bg-color,
      $dynamic-list-row-hover-bg-color
    );
  }

  &.disabled {
    .position {
      .draggable {
        cursor: default;
      }
    }

    .dragIcon {
      stroke: var(
        --dynamic-list-row-disabled-drag-icon-color,
        $dynamic-list-row-disabled-drag-icon-color
      );

      rect {
        fill: var(
          --dynamic-list-row-disabled-drag-icon-color,
          $dynamic-list-row-disabled-drag-icon-color
        );
      }
    }
  }

  .position {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;

    justify-items: start;

    svg {
      rect {
        fill: var(--dynamic-list-position-color, $dynamic-list-position-color);
      }
    }

    input {
      all: unset; // remove all input styling
      height: 50px;
      width: 50px;

      box-sizing: border-box;

      padding: 4px;

      border: 1px solid var(--input-border-color, $input-border-color);

      transition: box-shadow 0.15s ease-in-out 0s;

      &:disabled {
        background-color: var(
          --input-disabled-background-color,
          $input-disabled-background-color
        );
        border: 1px solid
          var(--input-disabled-border-color, $input-disabled-border-color);
        color: var(--input-disabled-font-color, $input-disabled-font-color);
      }
    }

    input:hover:enabled,
    input:focus {
      border: 1px solid var(--input-hover-color, $input-hover-color);
      box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
    }

    /* remove arrows from input
     Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* remove arrows from input
     Firefox */
    input[type='number'] {
      -moz-appearance: textfield;
    }

    .draggable {
      height: 100%;
      width: 100%;

      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      place-items: center;

      cursor: move;
    }

    .input {
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;

      text-align: center;
    }
  }

  .actionButton {
    height: 50px;
    width: 50px;
    justify-self: end;
  }

  .dragIcon {
    height: 40px;

    rect {
      width: 5.5px;
      height: 5.5px;
    }
  }

  // Attached when any element is being dragged
  &.dragging {
    // Disable pointer events on child while a row is being dragged. Better performance if done here via css.
    div {
      pointer-events: none;
    }
  }
}

.actionButtonContainer {
  display: flex;
}
