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

.root {
  overflow: hidden;
  &:hover,
  &.openFormat {
    .downIcon {
      opacity: 1;
      transform: translateX(0);
    }
  }

  &.openFormat.openFormat {
    --text-field-bg: var(--color-neutral-20);
    --text-field-hover-bg: var(--color-neutral-20);
    --text-field-focus-border-color: transparent;
  }
}

.field {
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  align-self: center;
  justify-self: end;
  overflow: hidden;
  min-width: 1px;

  padding: 0 !important;
  flex: none !important;
  text-align: right;
  position: relative;
  // width: auto !important;

  &.hasFormats,
  &.hasVariables {
    max-width: calc(100% - 16px);
  }
}

.inputHolder {
  &:first-child {
    padding: 0 4px;
  }
  &:not(:first-child) {
    padding: 0;
  }
}

.disabled {
  cursor: not-allowed;
  .field {
    pointer-events: none;
    color: var(--color-neutral-40);
  }
}

.noneValue:not(.disabled) {
  .field {
    color: var(--color-neutral-70);
  }
}

.counterCanvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: transparent;
  inset: 0 0 0 0;
  z-index: 1000000;
}

.dragBar {
  position: absolute;
  bottom: -5px;
  height: 10px;
  width: 100%;
  cursor: ew-resize;
}

.downIcon {
  background: transparent;
  outline: none;
  border: none;
  opacity: 0;
  font-size: 0.845em;
  transform: translateX(4px);
  color: var(--text-field-placeholder-color);
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.downIcon:hover,
.openFormat .downIcon {
  color: var(--text-field-color);
}