section {
  display: flex;
  flex-direction: row;
}

.tools {
  flex-grow: 1;
  &.transition {
    position: relative;
    .tool {
      position: absolute;
    }
  }
}

.tool {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  &.visible {
    animation: fadeIn 300ms ease-in;
  }
  &.hidden {
    animation: fadeOut 300ms ease-in;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  section {
    --toolbar-size: var(--size-16);
    flex-direction: column-reverse;
    padding-bottom: var(--toolbar-size);
    pos-tool-select {
      --button-size: var(--toolbar-size);
    }
  }
}