table,
.wp-block-table {

  width: 100%;
  min-width: 240px;
  border-collapse: collapse;

  th {
    font-family: var(--heading--font-family);
  }

  td,
  th {
    padding: 5px;
    border: 1px solid;
  }

  &.is-style-regular .has-background,
  &.is-style-stripes .has-background thead tr,
  &.is-style-stripes .has-background tfoot tr,
  &.is-style-stripes .has-background tbody tr:nth-child(even) {
    color: var(--table--has-background-text-color);
  }

  figcaption {
    color: var(--global--color-text-lighten);
  }

  &.is-style-stripes {

    border-color: var(--table--stripes-border-color);

    th,
    td {
      border-width: 0;
      border-right: 1px solid var(--table--border-color);

      &:last-child {
        border: none;
      }
    }


    thead {
      border-bottom: none;
    }

    tfoot {
      border-top-width: 1px;
    }

    tbody tr:nth-child(odd) {
      background-color: var(--table--stripes-background-color);
    }
  }
}

table.wp-calendar-table {


  max-width: 280px;
  border: none;

  tr {

    td,
    th {
      background: transparent;
      border: 0;
      text-align: center;
      line-height: 2;
      vertical-align: middle;
      word-break: normal;
      font-family: var(--global--font-secondary);


    }

    td {


      a {

        &:link {

          display: block;
          background: var(--global--color-secondary-base);
          border-radius: 80px;
          text-decoration: none;
          color: var(--global--color-invert);
          width: 2em;
          height: 2em;

        }


        &:hover {
          background: var(--global--color-primary-base);
          text-decoration: none;
        }

      }
    }

    th {
      font-weight: bold;
      background: var(--global--color-surface);
      padding: 0;

    }
  }

  thead,
  tbody {
    color: currentColor;

  }

  caption {

    text-align: center;
    color: var(--global--color-invert);
    font-size: var(--global--font-size-md);
    line-height: var(--global--line-height-md);

    background: var(--global--color-primary-base)
  }
}

.wp-calendar-nav {
  text-align: left;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px;

  a {

    &:link {
      text-decoration: none;
    }

  }

  svg {
    height: 1em;
    vertical-align: middle;

    path {
      fill: currentColor;
    }
  }

  .wp-calendar-nav-next {
    float: right;
  }

  .wp-calendar-nav-next,
  .wp-calendar-nav-prev {

    a {

      display: flex;
      align-items: center;

    }

  }

}