@use '../../variables' as *;

.editor {
  composes: flexColumn from '../../dim-ui/common.m.scss';
  margin: 0 -4px -4px -4px;
  gap: 2px;
}

.iconStat {
  display: inline-block;
  height: 17px;
  width: 17px;
}

.grabHandle {
  cursor: grab;
  touch-action: none;

  &:active {
    cursor: grabbing;
  }
}

.grip {
  composes: flexRow from '../../dim-ui/common.m.scss';
  composes: grabHandle;
  grid-area: grip;
  opacity: 0.5;
  font-size: 10px;
  padding-left: 10px;
  padding-top: 4px;
  align-self: stretch;
  align-items: flex-start;
}

.row {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-areas:
    'grip name buttons'
    'grip bar bar';
  gap: 0 4px;
  background-color: rgb(0, 0, 0, 0.6);
  align-items: center;
  padding: 4px 4px 4px 0;
  font-size: 14px;

  > * {
    white-space: nowrap;
  }

  &.ignored {
    grid-template-areas: 'grip name buttons';
    background-color: rgb(0, 0, 0, 0.3);
  }
}

.name {
  grid-area: name;
  composes: flexRow from '../../dim-ui/common.m.scss';
  align-items: center;
  gap: 2px;
}

.label {
  composes: flexRow from '../../dim-ui/common.m.scss';
  composes: grabHandle;
  align-items: center;
  white-space: nowrap;
  gap: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  align-self: stretch;
  width: 100%;
  margin-top: -4px;
  padding-top: 4px;

  .ignored & {
    opacity: 0.4;
  }
}

.statBar {
  grid-area: bar;
  composes: flexRow from '../../dim-ui/common.m.scss';
  margin: 4px 0 2px 4px;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.buttons {
  composes: flexRow from '../../dim-ui/common.m.scss';
}

.rowControl {
  composes: resetButton from '../../dim-ui/common.m.scss';
  padding: 0 6px;
  opacity: 0.9;

  @include interactive($hover: true, $focus: true) {
    &:not(:disabled) {
      color: var(--theme-accent-primary);
    }
  }

  .ignored &,
  &:disabled {
    opacity: 0.9;
    color: #555;
  }

  // We must remove pointer events from the icon or else the wacky event
  // delegation in useButtonSensor won't work because the event target will be
  // the icon, not the button.
  > :global(.app-icon) {
    pointer-events: none;
  }
}

.statRange {
  width: 100%;
  // TODO: Colors
  background-color: #333;
  height: 12px;
  position: relative;
  cursor: pointer;
}

.statBarFill {
  position: absolute;
  background-color: white;
  height: 100%;
  transition:
    all 0.2s ease-in-out,
    opacity 0.5s linear;
}

.statBarMin,
.statBarMax {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  height: 20px;
  width: 4px;
  transform: translateY(-4px);
  border: 2px solid var(--theme-accent-primary);
}

.statBarMax {
  transform: translateY(-4px) translateX(-2px);
  border-left: none;
}

.statBarMin {
  border-right: none;
}

.processing {
  // Apply a gentle pulsing opacity animation
  animation: processing-pulse 1s alternate infinite;
  animation-delay: 0.5s;
  opacity: 0.5;
}

@keyframes processing-pulse {
  100% {
    opacity: 0.2;
  }
}
