@import "variables";

$search-font-size: 14px;

:host {
  background: none !important;

  .search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 32px;
    width: 32px;
    overflow: hidden;
    transition: width 0.3s ease;
    border-radius: 4px 4px 0 0;

    &.active {
      width: 100%;

      &.with-counter {
        width: 300px;
      }
      &.with-results {
        width: auto;
      }
    }

    .search-input {
      display: flex;
      align-items: center;
      width: 100%;
      border: 0;
      outline: none;
      border-radius: 4px;
      box-shadow: none !important;
      font-size: $search-font-size;
      font-weight: 400;

      input {
        flex-grow: 1;
        width: 180px;
        display: none;
        border-radius: 4px 4px 0 0;

        &.active {
          display: flex;
        }

        //&::placeholder {
        //  color: $blue-200;
        //}
      }

      .separator {
        width: 1px;
        height: 32px;
        background: $blue-250;
      }

      .icon-button {
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        flex: 0 0 32px;
        display: flex;

        &.disabled {
          pointer-events: none;
          color: $blue-300;
          opacity: 0.4;
        }
      }

      i.al-icon {
        min-width: 32px;

        &.al-ico-search, &.al-ico-dialog-x {
          font-size: 20px;
          width: 20px;
        }
      }

      .jump-next {
        display: flex;

        .jump-button {
          background: transparent;
          border: none;
          color: #FFFFFF;
        }
      }

      input {
        padding-left: 8px;
        font-size: $search-font-size;

        &::placeholder {
          font-size: $search-font-size;
        }
      }
    }

    .match {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      user-select: none;
      padding: 0 12px;
    }
  }

}

:host.text-area {
  .search-input-container {
    .search-input {
      input {
        color: $white;
      }
    }
  }
}

:host.table-search {
  .search-input-container {
    border-radius: 4px;

    .search-input {
      color: #FFFFFF;

      i.icon-button.al-icon {
        color: #FFFFFF;
      }
    }

    background-color: #7786b5;

    .search-input {
      input {
        color: #FFFFFF;
      }
    }

    .match {
      color: #FFFFFF;
    }
  }
}

:host.search-header {
  .search-input-container {
    &.active {
      width: 284px;
    }

    .search-input {
      border-radius: 4px 4px 0 0;

      input {
        background-color: $blue-700;
        border-bottom: 2px solid;
        border-color: $blue-300;
        color: $blue-280;
        font-weight: 400;
        padding-right: 28px;
      }
    }
  }
}

:host.underline-search {
  .search-input-container {
    height: inherit;
    .search-input {
      input {padding-left:0;}
      i.al-icon {
        color: $blue-480;
      }
    }

    color: #5a658e;

    &.focused {
      color: $blue-480;
    }

    border-bottom: 2px solid;
    width: 100%;
  }
}


:host.light-theme {
  .search-input-container {
    color: $blue-400;

    border: 1px solid $blue-200;
    border-radius: 4px;

    .search-input {
      color: $blue-400;
      border-color: $blue-200;

      &:focus {
        border-color: $blue-480;
      }

      &::placeholder {
        color: $blue-250;
      }

      input {
        color: $blue-400;
      }
      .separator {
        background: $blue-200;
      }
    }
  }
}

:host.dark-theme {
  .search-input-container {

    .search-input {
      color: $blue-280;
      border-color: $blue-300;

      &:focus {
        border-color: $blue-500;
      }

      &::placeholder {
        color: $blue-280;
      }

      .separator {
        background: $blue-900;
      }
    }

    .icon-button {
      &:hover:not(.disabled):not(.al-ico-search) {
        color: $white;
      }
    }
  }
}

:host-context(.hyper-params-custom-col) {
  .search-input-container {
    margin: 0 12px;
    width: auto;
  }
}
