/*
  MFP Design System — Tabs
  Production CSS for tabs component.
  Import tokens.css before this file.
*/

/* ======================================================================
   TAB BAR
   ====================================================================== */
.tab-bar {
  display: flex;
  align-items: stretch;
}

/* ======================================================================
   TAB
   ====================================================================== */
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 16px 24px;
  background: var(--color-blue-25);
  border: 1px solid var(--color-light-grey);
  margin-right: -1px;
  font: var(--type-nav-primary);
  color: var(--color-darkest-grey);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.tab:hover {
  background: var(--color-pale-grey);
}

.tab--active {
  background: var(--color-white);
  border-bottom-color: var(--color-white);
  z-index: 1;
  cursor: default;
}

.tab--active:hover {
  background: var(--color-white);
}