@use "../colors" as c;
@use "../mixins" as m;

.weekly-calendar-event {
  @include m.ilios-button-reset;
  cursor: default;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  color: c.$raisinBlack;
  @include m.font-size("small");
  border: 1px solid c.$white;
  margin: 1px;
  padding: 0.25rem;
  text-align: left;
  overflow: hidden;
  z-index: 2;

  &.clickable {
    cursor: pointer;
  }

  .ilios-calendar-event-time {
    color: c.$rosewood;
    display: block;
    @include m.font-size("small");
    font-weight: bold;
    padding-bottom: 0.5em;
  }

  .ilios-calendar-event-location {
    display: inline;
    font-weight: bold;
  }

  &.ilm {
    border-top: 2px dotted c.$black;
  }
}
