@charset "UTF-8";

.mod-adventcalendar-items {
  --adv-grid-min-col-size: 12rem;
  --adv-tile-bg-color: hsl(0deg 0% 100%);
  --adv-tile-border-color: hsl(0deg 0% 80%);
  --adv-span-text-shadow:
    0 0 0.2rem hsl(0deg 0% 0%), 0 0 0.5rem hsl(0deg 0% 0%);
  --adv-tile-text-color: hsl(0deg 0% 100%);

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--adv-grid-min-col-size), 100%), 1fr)
  );
  gap: 1rem;
  padding-inline-start: unset;
  list-style-type: none;

  li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    color: var(--adv-tile-text-color);
    background-color: var(--adv-tile-bg-color);
    border: 1px solid var(--adv-tile-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem hsl(0deg 0% 0%);
    transition: all 0.2s ease-in-out;

    &:not(:has([aria-hidden="true"])) {
      &:hover,
      &:focus {
        box-shadow: 0 0 1rem hsl(0deg 0% 0%);
        transform: scale(1.025);
      }
    }
  }

  button {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    background-color: inherit;
    border-radius: inherit;
  }

  span {
    font-size: 4rem;
    text-shadow: var(--adv-span-text-shadow);
  }

  [aria-hidden="true"] {
    position: absolute;
    inset-inline-end: 0.5rem;
    inset-block-end: 0.5rem;
    font-size: 2rem;
  }
}

.mod-adventcalendar-background {
  --adv-tile-bg-color: transparent;

  padding: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* .mod-adventcalendar-item { */

/*  flex-direction: column; */

/*  display: flex; */

/* } */

/* .mod-adventcalendar-item .mod-adventcalendar-item-content { */

/*  order: 1; */

/* } */

/* .mod-adventcalendar-image { */

/*  margin-bottom: .5rem; */

/* } */

/* @supports (container-type: inline-size) { */

/*  div:has( > .mod-adventcalendar-grid), section:has( > .mod-adventcalendar-grid) { */

/*    container-type: inline-size; */

/*  } */

/* } */

/* .grid-cols-2 { */

/*  --grid-column-count: 2; */

/* } */

/* .grid-cols-3 { */

/*  --grid-column-count: 3; */

/* } */

/* .grid-cols-4 { */

/*  --grid-column-count: 4; */

/* } */

/* .mod-adventcalendar-grid { */

/*  --grid-layout-gap: 2rem; */

/*  --grid-item--min-width: 100px; */

/*  --gap-count: calc(var(--grid-column-count)  - 1); */

/*  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap)); */

/*  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); */

/*  grid-gap: var(--grid-layout-gap); */

/*  grid-template-columns: 1fr; */

/*  display: grid; */

/* } */

/* @container (width >= 768px) { */

/*  .mod-adventcalendar-grid { */

/*    grid-template-columns: 1fr 1fr; */

/*  } */

/* } */

/* @container (width >= 992px) { */

/*  .mod-adventcalendar-grid { */

/*    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); */

/*  } */

/* } */

/* @supports not (container-type: inline-size) { */

/*  @media (width >= 768px) { */

/*    .mod-adventcalendar-grid { */

/*      grid-template-columns: 1fr 1fr; */

/*    } */

/*  } */

/*  @media (width >= 992px) { */

/*    .mod-adventcalendar-grid { */

/*      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); */

/*    } */

/*  } */

/* } */