.root {
  display: inline-block;
  list-style: none;
  margin-right: -1px;
  margin-bottom: -1px;
}

.button {
  height: 100%;
  box-sizing: border-box;
  border-bottom: 0;
  list-style: none;
  padding: var(--mini-unit);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-serif);

  &:hover {
    cursor: pointer;
  }
}

.root:first-child .primary {
  border-top-left-radius: var(--round-corners);
}

.root:last-child .primary {
  border-top-right-radius: var(--round-corners);
}

.primary {
  position: relative;
  background: var(--palette-grey-lightest);
  color: var(--palette-grey-main);
  border: 1px solid var(--palette-grey-lighter);
  padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
  &.active {
    background-color: var(--palette-common-white);
    color: var(--palette-common-black);
    border-bottom: 0;
    border-top-width: calc(0.5 * var(--mini-unit));
    border-top-color: var(--palette-primary-main);
    border-radius: 0;
    z-index: 10;
  }
}

.secondary {
  font-family: var(--font-family-sans-serif);
  color: var(--palette-grey-dark);
  padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2)
    calc(0.5 * var(--mini-unit) + 3px) calc(var(--mini-unit) * 2);

  &.active {
    color: var(--palette-text-primary);
    font-weight: var(--font-weight-medium);
    border-bottom: 3px solid var(--palette-primary-main);
    padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
  }
}
