:host {
  @apply block relative;
}

.nc-heading {
  @apply flex flex-row items-center px-4 py-6 bg-white;

  label {
    @apply font-bold;
    width: 200px;
  }

  .expand {
    @apply flex-grow;
  }

  .more-toggle {
    @apply bg-transparent outline-none border-none;
    margin-top: 2px;

    ui-icon {
      @apply transition-all transform rotate-90;
    }

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

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

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

.nc-control-wrapper {
  @apply flex flex-row items-start pb-6;

  label {
    @apply mt-1 font-bold;
    width: 200px;
  }

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

    input {
      @apply flex-grow outline-none text-base font-bold border-0 border-b-2 border-solid pb-px-2;
    }

    input:disabled {
      @apply bg-white;
    }

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

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

.nc-generate {
  button {
    @apply text-base font-bold text-brand outline-none border-none bg-transparent mr-4 absolute right-0;
  }
}

::ng-deep .customer shared-notification-channel-control {
  .nc-control-wrapper {
    .input-wrapper {
      input {
        @apply border-glitter;
      }
    }
  }

  .nc-generate {
    button:disabled {
      @apply text-disabled-customer;
    }
  }
}

::ng-deep .branch shared-notification-channel-control {
  .nc-control-wrapper {
    .input-wrapper {
      input {
        @apply border-munsell;
      }

      ui-icon {
        @apply text-white;
      }
    }
  }

  .nc-generate {
    button:disabled {
      @apply text-disabled-branch;
    }
  }
}
