@import (reference) '../variables.less';

.root {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.fieldContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: @toolbar-item-size;
  display: flex;
  align-items: center;
  padding: 0 @snippet-gutter;
  box-shadow: inset 0 -@toolbar-border-thickness 0 0 @toolbar-border-color;
}

.snippetsContainer {
  position: absolute;
  top: @toolbar-item-size;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  margin: @snippet-gutter;
  padding: 0;
}

.snippet {
  position: relative;
  padding: 10px @field-gutter;
  cursor: pointer;
  color: @snippet-foreground;
  background-color: @snippet-background;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: @snippet-selection;
    border-radius: @radius-medium;
    opacity: 0;
    transition: @transition-slow;
    pointer-events: none;
  }
}

.snippetName {
  display: block;
  opacity: 0.7;
}

.highlight {
  color: @snippet-highlight;

  &:before {
    opacity: 1;
  }
}