[data-component-id="kackaamin:event_calendar"] {
  width: 100%;
  display: flex;
  flex-direction: column;


  & .event-calendar__view {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* add back after figure out how to add the fold up option */
    /* position: sticky; */
    /* top: 0; */
    z-index: 10;
    background: var(--bg-primary);
    padding: 24px 0;
  }

  & .event-calendar__header {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 24px;
    margin: auto;

    & h6 {
      margin: 0;
      text-align: center;
    }
  }

  & .event-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    background: var(--text-secondary);
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    color: var(--color-black);
  }

  & .event-calendar__grid {
    display: grid;
    width: fit-content;
    border-block-start: 1px solid var(--color-border-light);
    border-inline-start: 1px solid var(--color-border-light);
    border: 1px solid var(--color-mist);
    border-radius: 8.31px;
  }

  & .event-calendar__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    max-width: 280px;
  }

  & .event-calendar__weekday {
    padding: 8px 4px;
    color: var(--color-black);
    background: var(--color-mist);
    font-weight: 600;
    font-size: 6.65px;
    text-align: center;
  }

  & .event-calendar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-block-size: 52px;
    min-width: 30px;
    padding: 4px;
  }

  & .event-calendar__day.is-outside {
    color: var(--color-disabled);
  }

  & .event-calendar__day-number {
    font-weight: 600;
    font-size: 14px;
  }

  & .event-calendar__events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;

    & li {
      width: 6.75px;
      height: 6.75px;
      background: var(--event-color);
      border-radius: 100%;
    }

  }

  & .event-calendar__view,
  & .event-calendar__row,
  & .event-calendar__types,
  & .event-calendar__grid {
    width: 100%;
    max-width: 100%;
  }

  & h5 {
    color: var(--text-primary);
    font-size: 16px;
  }

  & .event-calendar__types {
    display: flex;
    flex-direction: column;
    padding: 0 0 24px 0;
    gap: 0px;

    & .event-calendar__types-label {
      padding: 8px 20px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      & span {
        color: var(--color-mist)
      }

      & span.collapse {
        transform: rotate(-90deg);
      }
    }


    & ul {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 24px;
    }

    & ul.collapse {
      display: none;
    }

    & .event-calendar__type-swatch {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: var(--event-color);
      border-radius: 100%;
      margin-right: 8px;
    }
  }

  @container main (min-width: 389px) {

    & .event-calendar__day {
      min-block-size: 62px;
      min-width: 50px;

      & .is-outside {
        color: var(--color-disabled);
      }
    }

  }

  /* Larger screens: roomy cells with full-width text chips. */
  @media (min-width: 1024px) {

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 48px;
    align-items: center;

    & .event-calendar__view {
      position: relative;
      padding: 24px 0 0 0
    }

    & .event-calendar__types {

      padding: 0;

      & .event-calendar__types-label {
        cursor: auto;

        & span {
          display: none;
        }
      }
    }

    & h5 {
      font-size: 20px;
    }
  }

  @media (min-width: 1368px) {
    & .event-calendar__upper-section {
      flex-direction: row;
    }

    & .event-calendar__header {
      padding-bottom: 32px;
    }

    & .event-calendar__day {
      min-block-size: 62px;
      min-width: 80px;
    }


    & .event-calendar__types {
      gap: 16px;
      padding: 0 40px;

      & .event-calendar__types-label {
        padding: 0 0;
      }

      & ul {
        padding: 0 0;

        & li {
          white-space: nowrap;
        }
      }

      & .event-calendar__type-swatch {
        width: 17px;
        height: 17px;
        margin-right: 12px;
      }
    }
  }
}