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

.session-offerings {
  @include m.detail-container(c.$tealBlue);

  .offering-section-top {
    @include m.detail-container-header;

    .title {
      @include m.detail-container-title;
    }

    .actions {
      @include m.detail-container-actions;
    }
  }

  .session-offerings-content {
    @include m.detail-container-content;
  }

  .session-offerings-header {
    background-color: c.$culturedGrey;
    display: grid;
    font-weight: bold;
    grid-template-columns: repeat(5, 1fr);

    div {
      background-color: c.$tealBlue;
      border-right: 1px solid c.$white;
      color: c.$white;
      overflow: hidden;
      padding: 0.5rem 0.25rem;
      white-space: nowrap;

      @include m.for-tablet-and-up {
        padding: 0.5rem;
      }
    }
  }
}
