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

.title {
  @apply text-page-heading font-bold;
}

.info {
  @apply text-2xl mt-1 mb-px-30;
}

.filter-chips {
  @apply flex flex-row justify-center;
}

.card-search-article {
  @apply bg-white rounded p-4 text-center;

  box-shadow: 0 -2px 24px 0 #dce2e9;
}

.card-search-article {
  min-height: calc(100vh - 380px);
}

ui-filter-filter-group-main {
  @apply mb-8 w-full;
}

::ng-deep page-article-search-main ui-filter-filter-group-main .ui-filter-chip:not(.selected) {
  @apply bg-glitter;
}

ui-filter-input-group-main {
  @apply block mx-auto;
  max-width: 600px;
}

.recent-searches-wrapper {
  @apply flex flex-col mx-auto items-start py-6 bg-white;
  width: 50%;
  z-index: 0;

  .recent-searches-header {
    @apply text-sm font-bold mb-4;
  }

  ul {
    @apply flex flex-col justify-start overflow-hidden items-start m-0 p-0 bg-white w-full;
    z-index: 0;

    .recent-searches-items {
      @apply list-none pb-px-15;

      button {
        @apply flex flex-row items-center outline-none border-none bg-white text-black text-base m-0 p-0;

        ui-icon {
          @apply flex w-px-35 h-px-35 justify-center items-center mr-3 rounded-full text-black;
          background-color: #e6eff9;
        }

        p {
          @apply m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis;
          max-width: 400px;
        }
      }
    }
  }
}
