@import "../colors.css";

.inputElement {
  color: var(--color-input-text-primary, var(--color-input-text));
  &:focus:not([disabled]):not([readonly]) {
    ~ .label:not(.fixed) {
      color: var(--color-primary);
    }
    ~ .icon {
      color: var(--color-primary);
    }
  }
}

.bar:before, .bar:after {
  background-color: var(--color-primary);
}

.label, .icon {
  color: var(--color-input-label-primary, var(--color-input-label));
}

.hint {
  color: var(--color-input-label-primary, var(--color-input-label));
}

.counter {
  color: var(--color-input-counter-primary, var(--color-input-counter));
}

.accent {
  .inputElement {
    color: var(--color-input-text-secondary, var(--color-input-text));
    &:focus:not([disabled]):not([readonly]) {
      ~ .label:not(.fixed) {
        color: var(--color-secondary);
      }
      ~ .icon {
        color: var(--color-secondary);
      }
    }
  }

  .bar:before, .bar:after {
    background-color: var(--color-secondary);
  }

  .label, .icon {
    color: var(--color-input-label-secondary, var(--color-input-label));
  }
  
  .hint {
    color: var(--color-input-label-secondary, var(--color-input-label));
  }

  .counter {
    color: var(--color-input-counter-secondary, var(--color-input-counter));
  }
}

.shrink .label {
  top: 0.6rem;
  font-size: 1.2rem;
}

.shrink .hint {
  display: block;
  opacity: 1;
}