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

.nz-widget-tools-button-expandable {
  $triangle-width: 6px;
  $triangle-height: $triangle-width;
  $shadow-vertical-offset: 1px;
  $margin-from-triangle-to-stroke: 5px;
  $arrow-shadow: $icon-shadow;

  position: relative;
  pointer-events: auto;

  &:hover {
    > .nz-triangle {
      @include triangle-bottom-right-color($hovered-icon-color);
    }
  }

  &:active {
    > .nz-triangle {
      filter: $no-shadow;

      @include triangle-bottom-right-color($pressed-icon-color);
    }
  }

  > .nz-triangle {
    border-radius: 0;
    position: absolute;
    right: $margin-from-triangle-to-stroke;
    bottom: $margin-from-triangle-to-stroke;
    filter: $arrow-shadow;
    pointer-events: none;

    @include triangle-bottom-right(
      $width: $triangle-width,
      $height: $triangle-height,
      $color: $buic-icon-color
    );
  }
}