@use "../abstracts/functions" as fun;

.toolbar {
  align-items: center;
  background: fun.get-var(color-primary);
  bottom: 0;
  color: fun.get-var(color-fg-inverted);
  display: flex;
  flex-flow: row wrap;
  gap: fun.get-var(spacing-xs);
  height: fun.get-var(toolbar-height);
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;

  & > &__options {
    background: fun.get-var(color-primary);
    color: fun.get-var(color-fg-inverted);
    font-size: fun.get-var(font-size-sm);
    height: 85%;
    padding: 0 fun.get-var(spacing-sm);

    &:hover,
    &:focus {
      background: fun.get-var(color-bg);
      color: fun.get-var(color-primary);
    }
  }
}