/**
 * 1. Keep each expression's text together as much as possible,
 *    but then wrap long words
 */
.euiExpression {
  @include euiTextBreakWord; /* 1 */
  @include euiFontSizeS;
  @include euiCodeFont;

  border-bottom: $euiBorderWidthThick solid transparent;
  display: inline-block; /* 1 */
  text-align: left;
  padding: ($euiSizeXS / 2) 0;
  transition: all $euiAnimSpeedNormal ease-in-out;
  color: $euiTextColor;

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

  & + .euiExpression {
    margin-left: $euiSizeS;
  }

  &.euiExpression--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: $euiSizeXS;
  }

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

    .euiExpression__description,
    .euiExpression__value {
      @include euiTextTruncate;
      display: inline-block;
      vertical-align: bottom;
    }

  }
}

.euiExpression-isUppercase .euiExpression__description {
  text-transform: uppercase;
}

.euiExpression-isClickable {
  cursor: pointer;
  border-bottom: $euiBorderEditable;

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

.euiExpression__icon {
  margin-left: $euiSizeXS;
}

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

.euiExpression--columns {
  width: 100%;
  display: flex;
  padding: $euiSizeXS;
  border-radius: $euiSizeXS;

  &.euiExpression-isClickable {
    background-color: $euiColorLightestShade;

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

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

  .euiExpression__value {
    flex-grow: 1;
  }

  .euiExpression__icon {
    margin-top: $euiSizeXS;
  }
}

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

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

    .euiExpression__description {
      color: $color;
    }
  }
}