:host {
  @apply flex flex-col box-border shadow-card rounded-card;
}

.header {
  @apply bg-white;

  h1 {
    @apply text-center text-card-heading my-16 font-bold;
  }
}

form {
  @apply grid flex-col gap-px-2 bg-transparent;

  ui-form-control {
    @apply p-4 bg-white;

    ui-select {
      @apply ml-8;
    }

    input {
      @apply ml-8;
    }
  }

  .actions {
    @apply text-center my-8;

    button {
      @apply rounded-full outline-none p-4 text-cta-l border-brand border-solid border-2 px-px-25 py-px-15 mx-4 font-bold;

      &.btn-cancel {
        @apply text-brand  bg-white;
      }

      &.btn-save {
        @apply text-white bg-brand;
      }

      &:disabled {
        @apply bg-inactive-branch border-none;
      }
    }
  }
}

.spin {
  @apply animate-spin;
}
