@use "sass:color";
.week-glance {
  .title {
    @include ilios-heading-h3;
    margin-bottom: 1em;

    &.collapsible {
      @include ilios-button-reset;
      @include font-size('xl');
      &.collapsed {
        &::after {
          content: '\25BA';
          @include font-size('medium');
        }
      }

      &.expanded {
        &::after {
          content: '\25BC';
          @include font-size('medium');
        }
      }
    }
  }

  .event {
    padding: .25rem 0;
    margin: .25rem 0;

    p {
      margin: 0;
      padding: 0;
    }

    .event-title {
      @include ilios-heading-h5;
      font-weight: 700;
      margin-bottom: 0;

      .date {
        font-weight: 400;
      }
    }

    .sessiontype,
    .location {
      font-style: italic;
    }

    .url {
      display: block;
      margin-left: 2em;
    }

    .instructors {
      label {
        font-weight: 600;
      }
    }
  }
}

@use "sass:color";
.week-glance {
  .title {
    @include ilios-heading-h3;
    margin-bottom: 1em;

    &.collapsible {
      @include ilios-button-reset;
      @include font-size('xl');
      &.collapsed {
        &::after {
          content: '\25BA';
          @include font-size('medium');
        }
      }

      &.expanded {
        &::after {
          content: '\25BC';
          @include font-size('medium');
        }
      }
    }
  }

  .event {
    padding: 0 .25rem;
    margin: 1rem 0;
    border-left: 3px solid $lightBlue;

    &:nth-of-type(even) {
      border-left: 3px solid $lavenderBlush;
    }

    p {
      margin: 0;
      padding: 0;
    }

    .event-title {
      @include ilios-heading-h5;
      font-weight: 700;
      margin-bottom: 0;

      .date {
        font-weight: 400;
      }
    }

    .sessiontype,
    .location {
      font-style: italic;
    }

    .url {
      display: block;
      margin-left: 2em;
    }

    .instructors {
      label {
        font-weight: 600;
      }
    }
  }
}

Use a border to highlight different events
Use a border to highlight different events
