@import '../../../../components/styles/variables.scss';
@import '../../../../components/styles/mixins.scss';

.variable-substitution {
  padding: 5px;

  >:not(:first-child) {
    margin-left: 10px;
  }

  > div {
    display: inline-block;
    height: 28px;
    vertical-align: top;
    line-height: 20px;
  }

  .variable-value {
    display: inline-block;
    height: 28px;

    .combo-box {
      display: inline-block;
      border: 0;
      padding: 0;
      width: 160px;
      height: 28px;

      .typeahead-input {
        height: 100%;
      }

      input {
        font-size: 14px;
        border: 1px solid $fluidx-gray-300;
        margin: 0;
        padding: 3px 6px;
        border-radius: 0 2px 2px 0;

        &:active,
        &:focus {
          outline: none;
          border-color: $hue-primary-color-dark;
        }
      }
    }

    .variable-label,
    .variable-input {
      display: inline-block;
      padding: 3px 6px;
      font-size: 14px;
      vertical-align: top;
      border: 1px solid $fluidx-gray-300;
    }

    .variable-label {
      min-width: 16px;
      background-color: $fluidx-gray-050;
      color: $fluidx-gray-800;
      border-radius: 2px 0 0 2px;
      border-right: none;
      text-align: center;
    }

    .variable-input {
      min-width: 75px;
      width: auto;
      border-radius: 0 2px 2px 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);

      &:active,
      &:focus {
        outline: none;
        border-color: $hue-primary-color-dark;
      }
    }
  }
}