.view-related-date,
.calendar {

  h3.teaser {
    margin-top: 0;
  }

  .universal-teaser {
    width: 100%;
  }

  .views-row {
    margin-bottom: (2 * $grid-gutter);

    .field--name-field-media-image {
      margin-top: 0;
    }

    @include breakpoint(s) {
      display: flex;
      flex-direction: row-reverse;

      .col--image {
        align-self: center;
        justify-self: flex-start;
        margin-left: (2 * $grid-gutter);
        max-width: 10rem;

      }

      .col--content {
        flex-grow: 1;
      }
    }

    @include breakpoint(m) {
      .col--image {
        max-width: 12rem;
      }
    }

    @include breakpoint(l) {
      .col--image {
        max-width: 14rem;
      }
    }
  }

  div[class*="Event"].views-row .field--name-field-event-status .field__item {
    //background-color: var(--color-bg-dark);
    background-color: var(--color-text);
    color: var(--color-text-inverted);
    font-size: var(--font-size-default);
    font-weight: normal;
  }

  .EventCancelled.views-row {
    border-left: 3px solid var(--color-danger);
    padding-left: .5rem;
  }

  // cf. field--name-field-event-status.scss
  div.EventCancelled,
  div.EventPostponed {
    &.views-row {
      .field--name-field-event-status .field__item {
        background-color: var(--color-danger);
        color: var(--color-text-inverted);
        display: inline-block;
        padding: 2px .5rem;
      }
    }
  }

  .EventScheduled .field--name-field-event-status {
    display: none;
  }

}

// OC 2.1.x remove redundant fields

.view-related-date.no-teaser-image {
  .views-row {
    @include breakpoint(s) {
      flex-direction: row;
    }
  }
  .universal-teaser {
    width: 100%;
  }
}

// Fix add-buttons margins more specifically

.view-header .button {
  .view-related-date & {
    @include breakpoint(m) {
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
}

// Date styling in calendars, see ../field/date.scss

.calendar {
  .smart-date--time {
    font-weight: normal;
    font-size: var(--font-size-default);
    display: inline-flex;
    flex-flow: row nowrap;
  }

  .field--type-smartdate,
  .smart-date--date .datetime,
  .datetime .smart-date--date {
    //padding-right: .25rem;
    font-size: var(--font-size-l);
    font-weight: bold;
  }
}
