/* ---- Calendar ---- */

.wp-block-calendar {
  a {
    text-decoration: none;
  }

  table {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
  }

  th {
    font-weight: bold;
    padding: 0.5em;
  }
}

.wp-calendar-nav {
  background-color: var(--wp--preset--color--secondary);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 640px;
  padding: 0.25em;
  width: 100%;
}

.sidebar .wp-block-calendar:first-child {
  margin-top: 0;
}

.wp-block-calendar {
  a {
    color: var(--wp--preset--color--mxs-link-alt);
  }

  a:hover,
  a:active {
    color: var(--wp--preset--color--mxs-link-alt-hover);
  }

  table:where(:not(.has-text-color)),
  tbody,
  th {
    color: var(--darker-gray);
  }

  td,
  th {
    border-color: var(--medium-gray);
  }

  th {
    background-color: inherit;
  }

  .wp-calendar-nav a {
    border-bottom-color: transparent;
  }

  .mxs-card.mxs-dark-bg & {
    a {
      color: var(--wp--preset--color--mxs-link-alt) !important;
    }

    a:hover,
    a:active {
      color: var(--wp--preset--color--mxs-link-alt-hover) !important;
    }
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    table {
      background-color: var(--pale-gray);
      border-color: var(--medium-gray);
    }

    caption {
      background-color: var(--wp--preset--color--secondary);
      color: var(--darker-gray);
    }
  }

  .mxs-light-theme-bg & {
    table {
      background-color: var(--pale-gray);
    }

    caption,
    .wp-calendar-nav {
      background-color: var(--wp--preset--color--secondary);
    }
  }

  .mxs-dark-theme-bg .mxs-light-bg &,
  .mxs-light-theme-bg .mxs-light-bg & {
    caption,
    .wp-calendar-nav {
      background-color: var(--wp--preset--color--base);
    }
  }

  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    caption,
    .wp-calendar-nav {
      color: var(--wp--preset--color--contrast);
    }

    .wp-calendar-nav {
      a {
        color: var(--wp--preset--color--mxs-link);
      }

      a:hover,
      a:active {
        color: var(--wp--preset--color--mxs-link-hover);
      }
    }
  }
}
