@import "../../configs/color";
@import "../../configs/constants";

.c-Toolbar {
  @import "../../resets/base";
  $sizes: (
    xl: 24px,
    lg: 20px,
    md: 12px,
    sm: 8px,
    xs: 4px
  );
  background-color: white;
  min-height: $UI_TOOLBAR_HEIGHT;
  padding: 4px 8px;
  position: relative;

  &.has-shadow {
    z-index: 1;
  }

  // Sizes
  @each $size, $value in $sizes {
    &.is-size-#{$size} {
      padding-left: $value;
      padding-right: $value;
    }
  }

  // Placement
  &.is-placement-top {
    border-bottom: 1px solid _color(border);
  }
  &.is-placement-bottom {
    border-top: 1px solid _color(border);
  }

  // Themes
  &.is-theme-default {
    background-color: white;
  }
  &.is-theme-note {
    background-color: _color(note, background);
    color: _color(yellow, 800);
  }

  // Seamless
  &.is-seamless {
    border: none;
  }
}