/*---------------------------------------------------------------------------------------------
* 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";

@mixin rotate($amount) {
  -webkit-transform: rotate($amount);
  -ms-transform: rotate($amount);
  transform: rotate($amount);
}

@mixin transition($seconds, $type) {
  -webkit-transition: -webkit-transform $seconds $type;
  -ms-transition: -ms-transform $seconds $type;
  transition: transform $seconds $type;
}

.components-property-label-renderer {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: auto;
}

.components-property-label-renderer-colon {
  margin: auto 3px auto 0px;
}

@mixin specific-property-label-renderer {
  position: relative;
  display: flex;

  .components-label-popup {
    background: $buic-background-window;
    width: max-content;
    padding: 5px;
  }
}

.components-primitive-property-label-renderer {
  @include specific-property-label-renderer;
}

.components-property-record--vertical {
  .components-nonprimitive-property-label-renderer {
    margin-bottom: 4px;
  }
}

.components-nonprimitive-property-label-renderer {
  @include specific-property-label-renderer;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: $buic-text-color;
  font-size: 14px;
  height: 100%;
  width: 100%;
  transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;

  > .components-property-label-renderer {
    flex: 1;
  }

  > div {
    width: 22px;
    height: 22px;
    margin-left: -7px;
    margin-right: 2px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    @include transition(0.15s, ease-in-out);

    &.components-expanded {
      @include rotate(90deg);
    }
  }

  &:hover {
    color: $buic-text-color-hover;
  }
}