/* Trilho de ferramentas e suas dicas. Abaixo de 820px vira uma faixa horizontal. */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  background: var(--hull);
  border-right: 1px solid var(--seam);
}

.rail-sep {
  width: 26px;
  height: 1px;
  background: var(--seam-2);
  margin-block: 6px;
  flex: none;
}

.tool {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--lichen);
  cursor: pointer;
  flex: none;
  transition: background-color 0.12s, color 0.12s;
}

.tool svg {
  width: 22px;
  height: 22px;
}

.tool:hover {
  color: var(--bone);
  background: var(--hull-2);
}

.tool[aria-pressed="true"] {
  color: var(--brass-2);
  background: var(--brass-wash);
  border-color: var(--brass-edge);
}

.tool .tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  background: var(--hull-0);
  border: 1px solid var(--seam-2);
  border-radius: 5px;
  color: var(--bone);
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: var(--z-tip);
  transition: opacity 0.1s;
}

.tool:hover .tip,
.tool:focus-visible .tip {
  opacity: 1;
}

@media (max-width: 820px) {
  .rail {
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 12px;
    border-right: 0;
    border-top: 1px solid var(--seam);
    scrollbar-width: none;
  }

  .rail-sep {
    width: 1px;
    height: 26px;
    margin-inline: 4px;
  }

  .tool .tip { display: none; }
}