sparkletown/sparkle

@import "scss/constants.scss";

$event-icon--size: 40px;

$schedule--grey: opaque-white(0.7);
$action-button-width: 136px;
$bookmark-icon-size: 30px;
$schedule-info-block-width: 60px;
$online-container-min-width: 50px;

.ScheduleItem {
  display: flex;
  padding: $spacing--lg;

  &:hover {
    background: linear-gradient(0deg, opaque-white(0.05), opaque-white(0.05));
    border-radius: 12px;
  }

  &__info {
    margin-top: $spacing--xs;
    width: $schedule-info-block-width;

    &--active {
      margin-top: 0;
      text-align: center;
    }
  }

  &__icon {
    flex-shrink: 0;
    height: $event-icon--size;
    width: $event-icon--size;
    margin: 0 $spacing--xs;
    border-radius: $border-radius--sm;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: $content--under;
  }

  &__details {
    flex: 1;
    margin-left: $spacing--sm;
  }

  &__buttons {
    display: flex;
  }

  &__button {
    width: $action-button-width;
    padding: $spacing--sm;
    font-weight: $font-weight--500;
    font-size: $font-size--md;
    line-height: 17px;
  }

  &__until,
  &__time,
  &__date {
    display: block;

    font-weight: $font-weight--500;
    font-size: $font-size--sm;
    line-height: 15px;
  }

  &__time--live {
    height: 30px;
    margin-bottom: $spacing--xs;

    display: flex;
    justify-content: center;
    align-items: center;

    background: $accent--under;
    border-radius: $border-radius--xl;

    font-size: $font-size--md;
    line-height: 17px;
  }

  &__time--end {
    color: $schedule--grey;
  }

  &__name {
    font-weight: $font-weight__700;
    font-size: $font-size--lg;
    line-height: 18px;
  }

  &__description {
    font-size: $font-size--sm;
    line-height: $font-size--md;
  }

  &__place {
    font-size: $font-size--md;
    line-height: 17px;

    &--location {
      color: $schedule--grey;
    }
  }

  &__bookmark {
    margin: 0 $spacing--sm 0 auto;
    background: $secondary;
    box-shadow: 0px 2px 4px opaque-white(0.25);
    border-radius: $border-radius--xl;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $bookmark-icon-size;
    height: $bookmark-icon-size;
  }

  &__online {
    margin: 0 $spacing--sm 0 auto;
    background: opaque-white(0.2);
    box-shadow: 0px 2px 4px opaque-white(0.25);
    border-radius: $border-radius--xl;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: $online-container-min-width;
    height: $bookmark-icon-size;
    padding: $spacing--md;

    &-icon {
      margin-right: $spacing--xs;
    }
  }
}