@import '@ipohjs/css-mixins';

table.calendar {
  @extend %reset-table;

  width: 100%;
  background-color: var(--ip-background-container);
  color: var(--ip-on-background-container);

  & .caption {
    @extend %visually-hidden;
  }

  & th,
  & td {
    width: calc(100% / var(--_cols, 8));
    margin-top: 100%;

    &:after {
      content: '';
      display: grid;
      position: relative;
      padding-top: var(--qwikCalendar_cell-paddingTop, 100%);
    }
  }
}