@import './apps/commudle-admin/src/assets/styles/variables';

.home-events-card-container {
  //border: 0.5px solid $silver-sand;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  @apply com-shadow com-w-80 md:com-w-auto com-border com-border-solid com-border-Bright-Gray com-rounded-md;

  .home-events-card-image-overlay {
    background: linear-gradient(360deg, rgba(13, 28, 46, 0.29) 0%, rgba(17, 51, 79, 0.1827) 100%);
    height: 100%;
    position: absolute;
    width: 100%;

    &.old {
      background: linear-gradient(360deg, rgb(13 28 46 / 45%) 0%, rgb(17 51 79 / 30%) 100%);
    }
  }

  .home-events-card-date {
    background-color: $white;
    border: 1px solid #0095ff;
    border-radius: $border-8;
    color: #0095ff;
    font-size: $fs-h4;
    font-weight: $fw-500;
    height: 58px;
    padding: $space-8;
    position: absolute;
    right: 12px;
    text-align: center;
    top: 38%;
    width: 58px;
    word-break: break-word;
    z-index: 1;

    &.old {
      border-color: $cadet;
      color: $cadet;
    }
  }

  .home-events-card-details {
    @apply com-flex com-flex-col com-justify-between com-p-3 com-bg-white;

    .home-events-card-name {
      height: 3.5rem;
      @apply com-my-0 com-font-normal com-text-lg com-text-gray-900 com-line-clamp-2;
    }
    .start-end-date {
      @apply com-text-gray-500 com-text-base;
    }

    .home-events-card-host {
      margin-top: $space-16;

      .home-events-card-community {
        .home-events-card-community-logo {
          border: 0.5px solid $platinum;
          @apply com-h-7 com-w-7;
          @apply com-rounded-full com-object-contain com-object-center com-align-middle com-bg-tWhite;
        }

        .home-events-card-community-name {
          word-break: break-all;
          @apply com-text-sm com-text-gray-400 com-mx-2 com-my-0 com-line-clamp-1;
        }
      }

      .home-events-card-register {
        color: #0095ff;
        font-size: $fs-h5;
        font-weight: $fw-600;
        text-transform: uppercase;
      }
    }
  }
}
