.board-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  border-bottom: var(--border-width) var(--border-type) var(--border-color);
}

.board-select-bar {
  display: flex;
  width: calc(100% - calc(0.4em + var(--border-width) + var(--border-width)));
  justify-content: center;
  background-color: var(--primary-color);
  border: var(--border-width) var(--border-type) var(--border-color);
  border-radius: var(--border-radius);
  flex-flow: wrap;
  margin-inline: 0.2rem;
  margin-block: 0.2rem;
}

.board-select-board-name-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-inline: var(--border-width) var(--border-type) var(--border-color);
  font-weight: bold;
  padding-block: 0.2rem;
}

.board-select-board-name-link-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--link-color);
  color: var(--primary-color);
  border-inline: var(--border-width) var(--border-type) var(--border-color);
  font-weight: bold;
  padding-block: 0.2rem;
}

#board-select-board-name-first {
  border-left: var(--border-width) var(--border-type) var(--border-color);
}

#board-select-board-name-only {
  border-left: var(--border-width) var(--border-type) var(--border-color);
}

.board-select-board-name-hover:before,
.board-select-board-name-hover:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.board-select-board-name-hover:after {
  border-bottom-color: var(--primary-color);
  border-width: calc(0.38em - var(--border-width));
  margin-left: calc(-0.38em + var(--border-width));
}

.board-select-board-name-hover:before {
  border-bottom-color: var(--border-color);
  border-width: 0.4rem;
  margin-left: -0.4rem;
}

.board-select-board-name-hover {
  padding-inline: 0.3rem;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: var(--border-width) var(--border-type) var(--border-color);
  border-radius: var(--border-radius);
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  top: calc(2.1rem + var(--border-width) + var(--border-width));
  font-size: 18px;
}

.board-select-board-name-container {
  padding-inline: 0.3rem;
}


.board-title-board-name-container {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}