@layer payload-default {
  .slug-field-component {
    width: 100%;

    .label-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: calc(var(--base) / 2);
    }

    // Buttons sit inside the input, pinned to the right.
    &__actions {
      position: absolute;
      top: 0;
      bottom: 0;
      inset-inline-end: calc(var(--base) / 2);
      display: flex;
      align-items: center;
      gap: calc(var(--base) / 2);
    }

    // Reserve room for the buttons so long values never run under them.
    .field-type.text:not(.has-many) input {
      padding-inline-end: calc(var(--base) * 6);
    }

    .lock-button {
      margin: 0;
      padding: 0;
    }
  }
}