/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Keep each expression's text together as much as possible,
 *    but then wrap long words
 */
.ouiExpression {
  @include ouiTextBreakWord; /* 1 */
  @include ouiFontSizeS;
  @include ouiCodeFont;

  border-bottom: $ouiBorderWidthThick solid transparent;
  display: inline-block; /* 1 */
  text-align: left;
  padding: ($ouiSizeXS / 2) 0;
  transition: all $ouiAnimSpeedNormal ease-in-out;
  color: $ouiTextColor;

  &:focus {
    border-bottom-style: solid;
  }

  & + .ouiExpression {
    margin-left: $ouiSizeS;
  }

  &.ouiExpression--columns {
    border-color: transparent;
    // Ensures there's no flash of the dashed style before turning solid for the active state
    border-bottom-style: solid;
    margin-bottom: $ouiSizeXS;
  }

  &.ouiExpression--truncate {
    max-width: 100%;

    .ouiExpression__description,
    .ouiExpression__value {
      @include ouiTextTruncate;
      display: inline-block;
      vertical-align: bottom;
    }

  }
}

.ouiExpression-isUppercase .ouiExpression__description {
  text-transform: uppercase;
}

.ouiExpression-isClickable {
  cursor: pointer;
  border-bottom: $ouiBorderEditable;

  &:hover:not(:disabled) {
    border-bottom-style: solid;
    transform: translateY(-1px);
  }
}

.ouiExpression__icon {
  margin-left: $ouiSizeXS;
}

.ouiExpression-isActive {
  border-bottom-style: solid;
}

.ouiExpression--columns {
  width: 100%;
  display: flex;
  padding: $ouiSizeXS;
  border-radius: $ouiSizeXS;

  &.ouiExpression-isClickable {
    background-color: $ouiColorLightestShade;

    // sass-lint:disable-block nesting-depth
    &:focus,
    &:hover:not(:disabled) {
      .ouiExpression__description,
      .ouiExpression__value {
        // inner child specificity so it inherits underline color from text color
        text-decoration: underline;
      }
    }
  }

  .ouiExpression__description {
    text-align: right;
    margin-right: $ouiSizeS;
    flex-shrink: 0; // Ensures it doesn't get smaller in case the value is really long
  }

  .ouiExpression__value {
    flex-grow: 1;
  }

  .ouiExpression__icon {
    margin-top: $ouiSizeXS;
  }
}

@each $name, $color in $ouiExpressionColors {
  .ouiExpression--#{$name} {
    &:focus {
      background-color: transparentize($color, .9);
    }

    &.ouiExpression-isActive {
      border-bottom-color: $color;
      border-color: $color;
    }

    .ouiExpression__description {
      color: $color;
    }
  }
}