//////////////////////////////
// THEME / COMPONENTS / EVENTS
//////////////////////////////


@use "../variables/" as var;


@layer components {

  /* Month Widget Styles */
  .wp-calendar th {
    width: 14%;
  }

  .monthwidget td span,
  .monthwidget td a {
    display: block;
    padding: 8px 1px;
  }

  // day selection classes
  .monthwidget td.active {
    background-color: var(--bg-white, #fff);
    color: var(--body);
  }


  .monthwidget td.active a {
    color: inherit;
  }

  .monthwidget td.today {
    background-color: #d00000;
    color: #fefdfa;
  }


  .monthwidget td.today a {
    color: inherit;
  }


  .monthwidget td a:hover {
    outline: 2px solid var(--link);
  }


  .monthwidget td.prev a,
  .monthwidget td.next a {
    padding: 11px 1px;
  }

  /* Event List Styles */
  .wdn-calendar .unl-event-teaser-ol {
    --item-size: #{var.$ms18}em;
    grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr));
  }

  .unl-event-teaser {
    display: grid;
    grid-template: 'a b' auto 'a c' 1fr #{'/'} var.$length-em-8 1fr;
  }


  .unl-event-title { grid-area: b; }
  .unl-event-date { grid-area: a; }
  .unl-event-details { grid-area: c; }


  @media screen and (min-width: 50em) and (max-width: 74em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(4)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 50em) and (max-width: 101.375em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(5)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 73.625em) and (max-width: 104.375em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(6)) {
      --item-size: #{var.$ms20}em;
    }

  }


  @media screen and (min-width: 104.375em) and (max-width: 135.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(6)) {
      --item-size: #{var.$ms22}em;
    }

  }


  @media screen and (min-width: 101.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(7)),
    .wdn-calendar .unl-event-teaser-ol:has(> :last-child:nth-child(8)) {
      --item-size: #{var.$ms21}em;
    }

  }


  @media screen and (min-width: 73.625em) and (max-width: 104.25em){

      .wdn-calendar .unl-event-teaser-ol:has(:nth-child(n+9)) {
          --item-size: #{var.$ms20}em;
      }

  }


  @media screen and (min-width: 104.25em) {

    .wdn-calendar .unl-event-teaser-ol:has(:nth-child(n+9)) {
      --item-size: #{var.$ms22}em;
    }

  }

}