.home-component {
  .banner {
    .banner-image {
      @apply com-w-full md:com-min-h-[316px] com-object-contain md:com-w-[1262px] com-bg-tWhite;
    }

    .edit-button {
      @apply com-absolute com-top-3 com-right-3 com-bg-white com-rounded-md;
    }
  }

  .without-banner {
    @apply com-min-h-[160px] md:com-min-h-[320px];
    background: linear-gradient(
      180deg,
      #8a8a8a -35.31%,
      rgba(173, 173, 173, 0) 109.06%,
      #adadad 109.06%,
      rgba(224, 224, 224, 0) 109.06%
    );
  }

  .page-header {
    @apply com-flex-col com-content-start com-mx-0 com-mb-16;
    @apply md:com-flex-row;

    .logo-section {
      @apply com-h-28 com-w-28  com-rounded-xl -com-mt-14 com-mx-4 com-mr-6 com-bg-white com-shadow-md com-flex com-items-end com-justify-between;
      @apply md:com-block md:-com-mt-24 md:com-ml-8;
      @apply lg:com-h-44 lg:com-w-44;

      .logo {
        @apply com-my-0 com-mx-auto com-h-28 com-w-28 com-px-2  com-object-contain com-rounded-xl com-bg-tWhite;
        @apply md:com-mr-20;
        @apply lg:com-h-44 lg:com-w-44;
      }
    }

    .details {
      @apply com-w-full com-ml-4 md:com-ml-0;

      h1 {
        @apply com-font-semibold com-mt-4 com-mb-4;
      }

      .membership {
        .member-location {
          @apply com-flex com-items-start com-gap-2 com-flex-col md:com-flex-row md:com-gap-2;
          .member-count {
            @apply com-gap-2 com-h-5 com-self-stretch md:com-m-0 com-items-start com-m-0 md:com-border-0 md:com-border-r-2 md:com-border-solid md:com-border-Bright-Gray md:com-pr-3;
            a {
              @apply com-text-gray-500 com-no-underline com-gap-2 com-inline-flex;
            }
          }
          .location {
            @apply com-inline-flex com-items-center com-gap-2 com-h-5 com-text-gray-500;
          }
        }

        .community-social-links {
          @apply com-flex com-gap-4 com-mt-6;

          nb-icon,
          fa-icon {
            @apply com-text-Very-Light-Blue;
          }

          fa-icon {
            @apply com-text-xl;
          }

          a {
            @apply com-no-underline;
          }
        }
      }
    }
    .membership-toggle {
      @apply com-mr-4 com-mt-5 com-ml-4 md:com-ml-0;
      ::ng-deep {
        nb-select {
          button {
            color: initial;
            @apply com-p-1 com-w-44;
          }
        }
      }
    }
  }

  .router-outlet {
    @apply com-w-full md:com-px-2;
  }
}

.page-menu {
  @apply com-w-full com-sticky com-top-16 com-z-20;

  nb-card {
    @apply com-m-0;

    nb-card-body {
      @apply com-pt-5 com-px-5 com-pb-0;
    }
  }

  .menu-items {
    @apply com-ml-2 com-overflow-y-scroll md:com-overflow-y-hidden;
    a {
      @apply com-text-gunmetal com-text-sm com-leading-4 com-h-fit com-m-0 com-pt-0 com-px-6 com-pb-17px com-cursor-pointer com-no-underline com-mt-4;

      nb-icon,
      fa-icon {
        @apply com-text-gunmetal com-opacity-80;
      }

      .title {
        @apply com-self-center com-ml-2;
      }

      span {
        @apply com-hidden;
        @apply md:com-inline;
      }
    }

    nb-icon {
      @apply com-text-2xl;
    }

    .active {
      @apply com-border-0 com-border-b-3 com-border-solid com-border-primary-500;

      nb-icon,
      .title {
        @apply com-text-primary-500;
      }
    }
  }
}

.menu-items-footer {
  @apply com-p-0 com-sticky com-top-16 com-z-20;
}

.banner-image {
  @apply com-aspect-4 com-object-contain com-w-[1262px];
  background: linear-gradient(
    180deg,
    #8a8a8a -35.31%,
    rgba(173, 173, 173, 0) 109.06%,
    #adadad 109.06%,
    rgba(224, 224, 224, 0) 109.06%
  );
}

.mini-header {
  @apply com-h-16 com-flex com-items-center com-mx-6 md:com-mx-8 com-justify-between;
  .community-details {
    @apply com-flex com-space-x-3;
    .mini-logo-section {
      @apply com-w-10 com-h-10 com-rounded-lg com-border com-border-gray-200 com-border-solid com-bg-tWhite;
      .mini-logo {
        @apply com-my-0 com-mx-auto com-h-10 com-w-10 com-object-contain com-rounded-lg com-overflow-hidden com-px-1;
      }
    }

    .details {
      .name {
        @apply com-text-base com-font-semibold com-m-0 com-line-clamp-1 com-text-Yankees-Blue;
      }
      .members-count {
        @apply com-text-sm com-font-normal com-text-Quartz com-m-0;
      }
    }
  }

  .action-buttons {
    @apply com-flex com-items-center com-space-x-6;
  }
}

.miniHeader {
  @apply com-mt-3 com-sticky com-top-16 com-z-[18] com-shadow-md #{!important};
}

.organization-details {
  @apply com-flex com-items-center com-bg-blue-50 com-text-primary-500 com-rounded-lg com-p-2 com-flex-shrink-0 com-mr-4 com-no-underline;

  fa-icon {
    @apply com-flex com-text-xs;
  }

  span {
    @apply com-text-sm com-font-semibold com-ml-2;
  }
}
