.fc {
  // layout of immediate children
  display: flex;
  flex-direction: column;

  font-size: 1em;

  &,
  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1em; // normalize cross-browser
  }

  & th {
    text-align: center;
  }

  & th,
  & td {
    vertical-align: top;
    padding: 0;
  }

  & a[data-navlink] {
    cursor: pointer;
  }

  & a[data-navlink]:hover {
    text-decoration: underline;
  }
}

.fc-direction-ltr {
  direction: ltr;
  text-align: left;
}

.fc-direction-rtl {
  direction: rtl;
  text-align: right;
}

.fc-theme-standard {
  & td,
  & th {
    border: 1px solid var(--fc-border-color);
  }
}

// for FF, which doesn't expand a 100% div within a table cell. use absolute positioning
// inner-wrappers are responsible for being absolute
// TODO: best place for this?
.fc-liquid-hack {

  & td,
  & th {
    position: relative;
  }

}