/*---------------------------------------------------------------------------------------------
* 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 "~@bentley/ui-core/lib/ui-core/style/typography";

$text-font-size: $uicore-font-size;
$text-font-color: $buic-text-color;

.components-property-record--horizontal {
  min-height: 24px;
  display: grid;
  // Vertical padding fixes visual inconsistency between Firefox and Chrome when property is selected.
  padding: 1px 9px;

  .components-property-record-label {
    font-size: $uicore-font-size-small;
    color: $buic-foreground-muted;
    margin-right: 5px;
  }

  .components-property-record-value {
    min-height: 24px;
    font-size: $text-font-size;
    color: $text-font-color;
    padding: 0px 5px;
  }
}

.components-property-record--vertical {
  display: grid;

  .components-property-record-label {
    font-size: $uicore-font-size-small;
    color: $buic-foreground-muted;
    margin: 0 9px;
    padding-top: 5px;
    padding-bottom: 0px;
  }

  .components-property-record-value {
    min-height: 24px;
    font-size: $text-font-size;
    color: $text-font-color;
    margin: 0 9px;
    padding-top: 0px;
    padding-bottom: 3px;
  }
}

@mixin record-cell {
  display: flex;
  align-items: center;
}

.components-property-record-label {
  @include record-cell;
}

.components-property-record-value {
  @include record-cell;
  overflow: hidden;

  span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .core-underlined-button {
    // Offset by 2px, because value is centered vertically
    // and the button has an underline which offsets it's content,
    // which in turn makes it not in line with the rest of text
    margin-top: 2px;
  }

  .multiline {
    display: flex;
    align-items: baseline;
  }

  .expanded {
    white-space: pre-wrap;
    margin-top: 4px;
    margin-bottom: 4px;

    .expand-toggle {
      float: right;
      margin-top: 2px;
    }
  }

  .expand-toggle {
    padding: 0;
    white-space: nowrap;
    border: none;
    background: none;
    color: var(--buic-foreground-primary);
    font-size: 12px;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    &:active {
      outline: none;
    }
  }
}