@layer payload-default {
  .assign-tenant-field-modal {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    &[open] {
      pointer-events: auto;

      .assign-tenant-field-modal__wrapper {
        display: flex;
      }
    }

    &__bg {
      z-index: -1;

      &:before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--theme-bg);
        opacity: 0.8;
      }
    }

    &__wrapper {
      z-index: 1;
      position: relative;
      display: none;
      flex-direction: column;
      max-width: calc(var(--base) * 30);
      min-width: min(500px, calc(100% - (var(--base) * 2)));
      border-radius: var(--style-radius-m);
      border: 1px solid var(--theme-elevation-100);
      background-color: var(--theme-bg);
      justify-content: center;
    }

    &__header {
      padding: calc(var(--base) * 0.75) var(--base);
      border-bottom: 1px solid var(--theme-elevation-100);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: calc(var(--base) * 2);
    }

    &__collection-pill {
      align-self: flex-start;
      flex-shrink: 0;
    }

    &__content {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) * 0.5);
      padding: var(--base) var(--base) 0 var(--base);
    }

    &__controls {
      display: flex;
      gap: calc(var(--base) * 0.5);
    }

    &__actions {
      display: flex;
      justify-content: flex-end;
      gap: calc(var(--base) * 0.4);
      padding: var(--base);
    }
  }
}