AugurProject/augur-ui

@import (reference) '~assets/styles/shared';

.Input {
  .border(true, @border-all, @color-input-border-no-focus, @border-width-1);

  background-color: @color-input-background;
  display: flex;

  button,
  .input-value-comparison {
    background-color: @color-input-background;
    font-weight: 500;
  }

  input {
    .border(true, @border-all, @color-transparent, @border-width-1);

    display: flex;
    flex: 1;
  }

  input::placeholder {
    color: @color-input-border-no-focus;
  }

  input:focus {
    .border(true, @border-all, @color-transparent, @border-width-1);
  }

  &:focus-within {
    .border(true, @border-all, @color-input-border, @border-width-1);
  }

  .fa-search {
    align-items: center;
    background-color: transparent;
    display: flex;
    padding: 0 1em;
  }

  .box {
    font-size: inherit;
    padding: 1em;
    width: 100%;

    &.search-input {
      padding-left: 0;
    }
  }

  .close {
    background-color: @color-transparent;
    height: @font-size-medium;
    line-height: @font-size-medium;
    margin-top: -9px;
    width: @font-size-medium;

    @media @breakpoint-mobile {
      margin-top: 0;
      max-height: 1.438rem;
      min-height: 1.438rem;
      min-width: 1.438rem;
    }
  }
}

.noFocus {
  &:focus-within {
    .border(true, @border-all, @color-transparent, @border-width-1);
  }
}

.Input__max {
  .caps--small();

  color: @color-purple;
  padding: 0 1rem;
}

.Input__maxDark {
  background-color: @color-lightergray !important;
}

.Input__Incremental {
  .border(true, @border-all, @color-transparent, @border-width-1);

  background-color: @color-input-background;
  display: flex;

  .box {
    font-size: inherit;
    padding: 1em;
    width: 80%;

    &.search-input {
      padding-left: 0;
    }
  }

  button,
  .input-value-comparison {
    background-color: @color-input-background;
  }

  input {
    .border(true, @border-all, @color-transparent, @border-width-1);

    display: flex;
    flex: 1 1 auto;
  }

  input::placeholder {
    color: @color-input-border-no-focus;
  }

  input:focus {
    .border(true, @border-all, @color-transparent, @border-width-1);
  }

  &:focus-within {
    .border(true, @border-all, @color-input-border, @border-width-1);
  }

  input[type='number'] {
    appearance: textfield;
  }

  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .fa-search {
    align-items: center;
    background-color: transparent;
    display: flex;
    padding: 0 1em;
  }
}

.value__incrementers {
  // .border(true, @border-left);

  display: flex;
  flex-direction: column;

  button {
    cursor: default;
    flex: 1;
    padding: 0 0.2em;

    &:active {
      background-color: @color-gray;
    }
  }
}

.focusBorder {
  .border(true, @border-all, @color-input-border, @border-width-2);
}

.lightBorder {
  .border(true, @border-all, @color-lightgray, @border-width-1);

  &:focus-within {
    .border(true, @border-all, @color-lightgray, @border-width-1);
  }
}

.setWidth {
  min-width: 17.81rem;
}