// ********************************************
// container definition
$toolbar-container: #{$prefix}-toolbar;
$toolbar-group: #{$prefix}-toolbar-group;

// ********************************************
// element definition
$divider-el: #{$prefix}-toolbar__divider;
$toolbar-button-el: #{$prefix}-toolbar__button;

.#{$toolbar-container} {
  display: inline-block;
  background: color(neutral, 000);
  @include border-radius($theme-base-border-radius);
  @include center();
  height: space(l) * 1.125;
  padding: 0 space(xs);

  &:not(&--without-depth) {
    @include box-shadow(depth(100));
  }

  & > *:not(:last-child) {
    margin-right: space(xs);
  }

  &__button {
    &:not(:last-child) {
      margin-right: space(xxs);
    }
  }

  &--right {
    justify-content: flex-end;
  }

  &--left {
    justify-content: flex-start;
  }

  &--compact {
    padding: 0;
    height: space(m) * 1.16666;
  }

  .toolbar-item {
    position: relative;
  }
}

.#{$toolbar-group} {
  display: flex;

  & > *:focus {
    z-index: 3;
  }

  &--space-xs {
    & > *:not(:last-child) {
      margin-right: space(xs);
    }
  }
}

.#{$divider-el} {
  width: border-size(xs);
  height: 100%;
}