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

@use "sass:color";

.sessions-grid-offering-table {
  @include m.ilios-table-structure;
  @include m.ilios-table-colors(c.$blueMunsell);

  margin: auto;
  width: 95%;

  thead {
    color: c.$white;
    position: sticky;
    top: 2rem;

    th {
      @include m.font-size("small");
      font-weight: normal;
      padding: 0.2rem 0.5rem;
    }
  }

  td {
    padding: 0.2rem 0.5rem;

    &.expanded-offering-manager {
      background-color: c.$lightBlue;
      padding: 0;
    }

    .change-room {
      max-width: 75%;
    }

    .actions {
      z-index: 10;
    }
  }

  .offering-block {
    & > td {
      padding-top: 0.5rem;
    }
  }

  .offering-block-date {
    border-top: 1px solid c.$culturedGrey;
    font-weight: bold;
  }

  .sessions-grid-offering {
    transition: background-color 0.5s ease-out;
    &.even {
      background-color: color.adjust(c.$lightBlue, $lightness: -10%);
    }
    &.was-updated {
      background-color: color.adjust(c.$fernGreen, $lightness: 30%);
    }
    .room {
      overflow-wrap: anywhere;
    }
  }

  .first-row td {
    padding-top: 2rem;
  }

  .offering-block + .first-row td {
    padding-top: 0;
  }

  .offering-form {
    background-color: c.$white;
    border: 1px solid c.$culturedGrey;
    padding: 0.5rem;
  }
}
