@import '../colors';
@import '../mixins';

.tix-search-box.v4 {
  @include font-base;
  display: flex;
  align-items: center;

  .input-box {
    position: relative;
    padding: 10px 12px;
    border-radius: 24px;
    background-color: $color-N0;
    line-height: 16px;
    box-sizing: border-box;
    @include elevation-1;
    display: flex;
    flex: 1 1 auto;
    align-items: center;

    &.sm {
      padding: 6px 12px;
    }

    input {
      border: 0;
      padding: 0 4px 0 20px;
      color: $color-N800;
      @include font-size-b2;
      font-family: inherit;
      caret-color: $color-B500;
      flex: 1 1 auto;
      width: 100%;
      background-color: transparent;

      &::placeholder {
        font-weight: $font-weight-regular;
        color: $color-N500;
      }

      &:focus {
        outline: 0;
      }
    }

    // Add margin left when search bar have navigation
    &-with-nav {
      margin-left: 16px;
    }

    // White background fill background-color N100
    &-white-bg {
      background-color: $color-N100;
      box-shadow: none;
    }

    // With Link
    .with-link {
      cursor: pointer;
      flex-shrink: 0;
      border-left: 1px solid $color-N200;
      padding-left: 4px;
      width: 113px;
      overflow: hidden;
      display: flex;
      align-items: center;

      span {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        color: $color-B400;
      }

      .tix-icon {
        margin-right: 4px;
      }
    }

    .ic-search {
      position: absolute;
    }
  }

  //Centerized Icon
  .ic-search,
  .ic-close-oval {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ic-close-oval {
    cursor: pointer;
  }
}