:host {
  @apply block;
  box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
}

.input-desription {
  @apply my-0 px-4 font-bold text-p2;
}

.input-options-wrapper {
  grid-template-rows: auto 1fr;
  @apply grid bg-white rounded;
}

.hidden-overflow {
  @apply overflow-hidden;
}

.input-options-header {
  @apply grid grid-flow-col justify-end items-center mb-2;

  button {
    @apply bg-transparent p-4 text-p2 outline-none border-none text-[#0556B4];
  }

  &.header-shadow {
    @apply shadow-card;
  }
}

.input-options-wrapper {
  @apply relative;
}

.input-options {
  @apply overflow-scroll;
}

.cta-scroll {
  @apply absolute bottom-[0.875rem] right-4 border-none outline-none bg-white w-[3.625rem] h-[3.625rem] rounded-full flex flex-row flex-nowrap items-center justify-center text-[#0556B4] z-fixed;
  box-shadow: 0px 0px 20px rgba(89, 100, 112, 0.5);

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

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