@import "~monday-ui-style/dist/mixins";

.editableTypography {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  // Shifts the component to align the text with the container
  margin-left: -6px;
  overflow: hidden;
  position: relative;

  .input {
    display: inline-block;
    max-width: 100%;
    min-width: 64px;
    padding: 0 var(--spacing-xs);
    outline: none;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-text-color);
    background-color: transparent;

    &:focus,
    &:active {
      outline: none;
    }
  }

  .typography {
    border: 1px solid transparent;
    padding: 0 var(--spacing-xs);
    border-radius: var(--border-radius-small);

    &:hover:not(.disabled) {
      border-color: var(--ui-border-color);
    }

    &.hidden {
      position: absolute;
      opacity: 0;
      height: 0;
      visibility: hidden;
      white-space: pre;
    }

    &.placeholder {
      color: var(--secondary-text-color);
    }
  }
}