@use '../components/agenda-item/mixin' as agenda-item;
@use '../variables';

.event-item {

  @include agenda-item.agenda-item();

  padding: 0!important;

  .media-body > a {

    color: inherit;
    display: block!important;

  }

  .avatar {
    border: none;
  }

  &.compact {
    .ill {
      max-width: 56px;
    }
    .media-heading {
      margin-bottom: 0px;
    }
    .btn {
      padding: 2px 12px 0 0;
    }
  }

  &.media {
    margin-top: 0;
  }

  &:hover {
    background: $oa-gray-lightest;
  }

  &.draft {

    border-left: 4px solid $oa-gray-lightish;

    background: lighten( $oa-gray-lighter, 4 );

    &:hover {
      background: lighten( $oa-gray-lighter, 3 );
    }

  }

}