:host {
  @apply block relative;
}

.nc-heading {
  @apply flex flex-row items-center px-5 bg-white;

  .expand {
    @apply flex-grow;
  }

  .more-toggle {
    @apply bg-transparent outline-none border-none transition-all transform -rotate-90;

    &.open {
      @apply rotate-90;
    }
  }
}

.nc-content {
  @apply h-0 overflow-hidden transition-all bg-white px-5;

  &.open {
    @apply h-auto overflow-auto;
  }
}

.nc-control-wrapper {
  @apply flex flex-row items-center justify-center;

  .input-wrapper {
    @apply flex flex-col flex-grow;

    input {
      @apply w-full flex-grow font-bold rounded bg-[#EDEFF0] border-[#AEB7C1] border border-solid outline-none text-p1 p-4;
    }

    input::placeholder {
      @apply text-[#89949E] font-normal text-p2;
    }

    &.has-error input {
      @apply border-brand;
    }

    .error {
      @apply text-right text-p3 font-bold text-brand;
    }
  }
}

button:disabled {
  @apply text-[#596470] cursor-not-allowed;
}

::ng-deep shared-notification-channel-control ui-checkbox {
  ui-icon {
    @apply rounded;
    color: #aeb7c1 !important;
  }

  ui-icon[icon="checked"] {
    color: white !important;
    background-color: #596470 !important;
  }
}
