@import '{}/imports/client/stylesheets/variables.scss';

.event-list-item {
  position: relative;
  min-height: 90px;
  max-height: fit-content;
  border-radius: 0 !important;
  border-right: 0;
  border-left: 0;

  &>div {
    width: 90%;
  }

  .name, .categories, .distance {
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

  .name {
    font-weight: bolder;
    font-size: 1em;
  }

  .categories {
    font-size: .87em;
  }

  .distance {
    font-size: .8em
  }

  .go-to {
    position: absolute;
    top: 32px;
    right: 18px;
    font-size: 1.5em;
    color: $primary-blue;
    cursor: pointer;
    transition: color .15s ease;

    &:hover {
      //color: $primary-blue-hover;
    }
  }

  &.highlighted{
    font-size: 1.1em;
    cursor: pointer;
    transition: box-shadow,font-size  .35s ease-in-out;
    transform: translateY(-1px);
    box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset, 
                rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
   
  }
}
    
.event-list-item:hover{
    font-size: 1.1em;
    cursor: pointer;
    transition: box-shadow, font-size .35s ease-in-out;
    transform: translateY(-1px);
    box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset,
                rgba(0, 0, 0, 0.3) 10px 18px 36px -18px inset;

}
