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

.offering-calendar {
  border: 1px solid c.$black;
  border-radius: 5px;
  box-sizing: border-box;
  clear: both;
  margin-bottom: 1rem;
  min-height: 5rem;
  padding: 0.25rem 2rem 0.75rem;
  position: relative;

  h2 {
    @include m.font-size("medium");
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
  }

  .loding-indicator {
    @include m.ilios-heading-h1;
    left: 4rem;
    opacity: 75;
    position: absolute;
    top: 5rem;
    transition: all 0.5s ease-in-out;

    &.loaded {
      opacity: 0;
    }
  }

  .offering-calendar-filter-options {
    text-align: left;

    .filter {
      display: block;
      margin-bottom: 1rem;
      width: 100%;

      label {
        @include m.ilios-label;
        cursor: pointer;
      }
    }
  }
}
