// Style
.search-bar {
  .rounded-corners();
  background: @low-sat-blue;

  // Reset all input styles
  input, [type="button"] {
    .appearance(none);
    border: none;
    background: none;
  }

  // Submit button styles
  input[type=submit],
  button[type=submit],
  button:not([type]) {
    background: @icinga-blue;
    color: @text-color-inverted;
    border-top-right-radius: .25em;
    border-bottom-right-radius: .25em;
  }

  // Hide the submit button, it must exist, but shouldn't be shown to the user
  input[type=submit][value="hidden"] {
    display: none;
  }

  // Left-most search dropdown style
  button.search-options {
    i.icon:before {
      font-size: 1.2em;
      margin-right: 0;
      color: @icinga-blue;
    }

    &:disabled {
      i.icon:before {
        color: @gray-light;
      }
    }
  }

  // Scrollbar style
  // @todo Not final
  .filter-input-area {
    &::-webkit-scrollbar {
      display: none;
      height: .5em;
    }

    &:hover::-webkit-scrollbar {
      display: initial;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(to right, transparent 0%, @icinga-blue 20%);
    }
  }

  // Term styles
  .filter-condition {
    button {
      border-radius: .4em 0 0 .4em;
      background-color: @color-critical;
      color: @text-color-inverted;

      &:after {
        content: "";
        position: absolute;
        width: .4em;
        height: 100%;
        right: 0;
        top: 0;

        background-color: @low-sat-blue;
        border: .2em solid @color-critical;
        border-width: 0 0 0 .2em;
        border-top-left-radius: .4em;
        border-bottom-left-radius: .4em;
      }
    }

    input {
      background-color: @gray;
      color: @text-color-inverted;
    }
  }

  .terms > .filter-condition:first-child button {
    border-radius: 0 .4em .4em 0;

    &:before {
      content: "";
      position: absolute;
      width: .4em;
      height: 100%;
      left: 0;
      top: 0;

      background-color: @low-sat-blue;
      border: .2em solid @color-critical;
      border-width: 0 .2em 0 0;
      border-top-right-radius: .4em;
      border-bottom-right-radius: .4em;
    }

    &:after {
      content: none;
    }
  }

  .logical_operator,
  .grouping_operator_open,
  .grouping_operator_close {
    input {
      .rounded-corners();
      background-color: fade(@gray, 50%);
      color: @text-color-light;
    }
  }

  .operator,
  .logical_operator,
  .grouping_operator_open,
  .grouping_operator_close {
    input {
      text-align: center;
    }
  }

  [data-index] input:invalid {
    background-color: @color-critical;
    color: @text-color-inverted;
  }

  [data-index] input:disabled {
    background-color: @gray-light;
  }

  .column input {
    .rounded-corners(.4em);
  }
  .column:not(:last-of-type),
  .column.last-term {
    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .operator:last-of-type:not(.last-term) input {
    .rounded-corners(.4em);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .value input {
    .rounded-corners(.4em);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .highlighted input {
    background-color: @icinga-blue;
    color: @text-color-on-icinga-blue;
  }

  .selected input {
    background-color: @disabled-gray;
    color: @gray-light;
    font-style: italic;
  }

  ul.comma-separated {
    display: inline;
    padding: 0;

    list-style-type: none;

    li {
      display: inline;

      &:not(:first-of-type):before {
        display: inline;
        content: ', ';
      }
    }
  }
}

// Layout
.search-bar {
  display: flex;
  position: relative; // Required for the suggestions

  .filter-input-area {
    overflow: auto hidden;
    overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit
    display: flex;
    width: 100%;
    padding: .3em .3em .6em .4em;

    label input {
      line-height: 1.5;
    }

    // Lets inputs grow based on their contents, Inspired by https://css-tricks.com/auto-growing-inputs-textareas/
    label {
      position: relative;
      display: inline-block;
      min-width: 2em;

      &::after,
      input {
        width: auto;
        padding: .15em .5em;
        resize: none;
      }

      input {
        width: 100%;
        position: absolute;
      }

      &::after {
        height: 0;
        content: attr(data-label);
        visibility: hidden;
        white-space: nowrap;
        padding: 0 7/12em;
      }
    }

    > label {
      flex: 1 0 auto;

      &::after,
      input {
        max-width: none;
        min-width: 8em;
      }
    }
  }

  .terms {
    display: inline;
    flex-shrink: 0;

    .filter-chain,
    .filter-condition {
      display: inline;
    }

    .filter-condition {
      position: relative;

      button {
        display: none;
        z-index: 1;
        width: ~"calc(2em + 2px)";
        padding: .15em .6em .15em .4em;
        position: absolute;
        left: ~"calc(-2em - 2px)"; // That's min-width + margin-right of an operator

        i:before {
          margin-right: 0;
        }
      }

      &:not(._hover_delay):hover button {
        display: inline;
      }
    }

    > .filter-condition:first-child button {
      padding: .15em .4em .15em .6em;
      left: auto;
      right: ~"calc(-2em - 1px)"; // That's min-width + margin-left of an operator
    }

    label {
      margin-right: 1px;

      &.logical_operator,
      &.grouping_operator_open,
      &.grouping_operator_close {
        margin-left: 1px; // adds up to 2px with the previous term
        margin-right: 2px;
      }
    }
  }

  &.disabled {
    .terms .filter-condition:hover button {
      display: none;
    }
  }

  .search-suggestions {
    margin-top: .3em;
  }
}
