.caption {
  color: var(--mirai-field-content-color);
  flex: 1;
  overflow: hidden;
  text-align: var(--mirai-ui-text-align);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption.placeholder {
  color: var(--mirai-ui-input-color-disabled);
}

.field {
  align-items: center;
  align-content: center;
  background-color: var(--mirai-field-background);
  border-radius: var(--mirai-field-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: var(--mirai-ui-row-direction);
  gap: calc(var(--mirai-ui-input-text-padding-x) / 2);
  height: var(--mirai-field-height);
  justify-content: flex-start;
  padding: 0 var(--mirai-ui-input-text-padding-x);
  z-index: var(--mirai-ui-layer-S);
}

.field:not(.inline) {
  border: var(--mirai-field-border);
  transition: border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
    box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
}

.field:not(.inline):not(.error).focus,
.field:not(.inline):not(.error).hover {
  border-color: var(--mirai-field-border-active);
}

.field.inline.focus,
.field.inline.hover {
  background-color: var(--mirai-field-background-active);
}

.field.error {
  border-color: var(--mirai-ui-error);
}

.icon {
  font-size: var(--mirai-ui-input-text-icon-size);
  height: var(--mirai-ui-input-text-icon-size);
  line-height: var(--mirai-ui-input-text-icon-size);
  width: var(--mirai-ui-input-text-icon-size);
}

.icon.context {
  color: var(--mirai-field-icon-color);
}

.icon.skeleton {
  color: var(--mirai-ui-content-border);
}

.icon.error {
  color: var(--mirai-ui-error);
}

.icon.warning {
  color: var(--mirai-ui-warning);
}

.label {
  color: var(--mirai-field-label-color);
}

.input {
  flex: 1;
}

.field input {
  color: var(--mirai-field-content-color);
}

.layerContent {
  margin: var(--mirai-ui-input-text-padding-y) 0;
  background-color: var(--mirai-ui-input-background);
  border: var(--mirai-field-border);
  border-radius: var(--mirai-field-border-radius);
  box-shadow: var(--mirai-ui-shadow);
}

/* S */
@media only screen and (max-width: 480px) {
  .modal {
    max-height: var(--mirai-modal-max-height);
  }

  .modal.expanded {
    height: var(--mirai-modal-max-height);
  }

  .field {
    width: auto;
  }

  .input {
    max-width: 90%;
  }
}

/* M & L */
@media only screen and (min-width: 481px) {
  .caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .field:not(.hasPlaces) .caption {
    max-width: 25vw;
  }

  .field.hasPlaces .caption {
    max-width: 15vw;
  }
}
