// New Input
//================================================== //

.field {
  .btn-actions {
    .icon {
      height: 18px;
      width: 18px;
    }
  }
}

label.required:not(.inline) .required-asterisk,
.label.required:not(.inline) .required-asterisk,
label.required:not(.inline):not(.accessible):not(.checkbox-label)::after,
.label.required:not(.inline):not(.accessible):not(.checkbox-label)::after,
label.required .label-text:not(.accessible):not(.checkbox-label)::after,
.label.required .label-text:not(.accessible):not(.checkbox-label)::after {
  font-size: $ids-size-font-md !important;
  top: 3px !important;
}

label.required:not(.inline):not(.accessible):not(.checkbox-label) {
  // Handle ellipsis case
  &.has-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 7px;

    &::after {
      position: absolute;
      inset-inline-start: calc(100% - 8px);
      top: 10px !important;
    }
  }
}

span.required::after {
  font-size: $ids-size-font-md;
}

.field-info {
  + .error-message {
    margin-top: 0;
  }
}

.error-message {
  .icon {
    height: 18px;
    margin-block-start: 3px;
    margin-inline-end: 1px;
    width: 18px;
  }

  .message-text {
    padding-left: 21px;
  }
}

div[class*='-message'].truncated {
  .icon {
    top: 1px !important;
  }

  .message-text {
    line-height: normal;
  }
}

.is-firefox {
  .field-short,
  .form-layout-compact .field {
    input:not(.spinbox) {
      padding-top: 0;
    }
  }
}

button.close {
  top: 7px;
  width: 14px;

  .icon {
    height: 16px;
    right: initial;
    top: -2px;
    width: 16px;
  }
}

.alert-message,
.success-message,
.info-message,
.custom-icon-message {
  .icon {
    height: 18px;
    left: -1px;
    top: -2px;
    width: 18px;
  }
}