/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "variables";

$separator-color: $buic-text-color-muted;

.components-toolbar-items-container {
  $border-radius: 3px;

  border-radius: $border-radius;
  display: inline-block;
  vertical-align: bottom;
  box-sizing: border-box;

  box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, .35 );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: auto;

  &.components-vertical {
    width: $components-desktop-toolbar-width;

    > * {
      height: $components-desktop-item-height;

      &:not(:first-child) {
        margin-top: $components-desktop-space-between-toolbar-items;

        &:before {
          content: '';
          display: block;
          position: absolute;
          pointer-events: none;
          height: $components-desktop-space-between-toolbar-items;
          width: 100%;
          left: 0;
          top: -$components-desktop-space-between-toolbar-items;
        }
      }
    }
  }

  &.components-horizontal {
    height: $components-desktop-toolbar-height;

    > * {
      display: inline-block;
      height: 100%;
      width: $components-desktop-item-width;

      &:not(:first-child) {
        margin-left: $components-desktop-space-between-toolbar-items;

        &:before {
          content: '';
          display: block;
          position: absolute;
          pointer-events: none;
          width: $components-desktop-space-between-toolbar-items;
          height: 100%;
          left: -$components-desktop-space-between-toolbar-items;
          top: 0;
        }
      }
    }
  }

  > * {
    vertical-align: bottom;
  }
}

/* modifications to the style to support the appearance of a tool button separator  */
.components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before {
  margin-left: $components-desktop-separator-gap-between-toolbar-items;
}

div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
  width: $components-desktop-separator-thickness;
  background-color: $separator-color;
  left: $components-desktop-separator-center-offset;
}

.components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before {
  margin-top: $components-desktop-separator-gap-between-toolbar-items;
}

div.components-toolbar-items-container.components-toolbar-show-decorators .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
  height: $components-desktop-separator-thickness;
  background-color: $separator-color;
  top: $components-desktop-separator-center-offset;
}