src/scss/layout/_toolbar.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

.toolbar {
  align-items: center;
  background: fun.get-var(color-primary);
  bottom: 0;
  box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow-dark);
  color: fun.get-var(color-fg-inverted);
  display: flex;
  flex-flow: row nowrap;
  gap: fun.get-var(spacing-xs);
  height: fun.get-var(toolbar-height);
  justify-content: center;
  left: 0;
  padding: 0 fun.get-var(spacing-sm);
  position: absolute;
  right: 0;
  z-index: 2;

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

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