@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

$border-color: rgb(151, 151, 151);

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  

  &:not(.rounded) {
    height: 30px;
    border-bottom: 1px solid $border-color;

    &:focus-within {
      &::after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -5px;
        border-bottom: 4px solid #AEDCEA;
      }
    }
  }

  &.rounded {
    height: 48px;
    padding: 0 ($baseUnit * 3);
    border: 1px solid rgb(151, 151, 151);
    border-radius: 24px;
  }

  input {
    width: 100%;
    height: 100%;
    width: 100%;
    line-height: 48px;
    font-size: 16px;
    border: none;
  }

  input:focus {
    outline: 0;
  }

  .icon-group {
    display: flex;
    margin-left: auto;
    gap: 0.2rem;

    .icon {
      cursor: pointer;

      svg {
        width: 18px;
        height: 18px;
        display: block;
      }
    }

    .icon:hover {
      transform: scale(1.1);
    }

    &.rounded {
      .icon {
        right: $baseUnit;
      }
    }
  }

  .search-result {
    position: absolute;
    top: calc(100% - 1px);
    display: flex;
    left: -1px;
    right: -1px;
    background: #fff;
    z-index: 10;
    border: 1px solid $border-color;
    border-radius: 0 0 24px 24px;
    padding-bottom: 20px;
    max-height: 300px;
    box-shadow: 0 0 0 4px #aedcea;
    box-shadow: 0px 13px 10px 0px rgba(#000, 0.08);

    .search-results-inner {
      margin: 0;
      padding: 0;
      list-style: none;
      border-collapse: collapse;
      width: 100%;
      overflow-y: auto;
  
      .search-results-item-children {
        margin: 0;
        padding: 0;
        display: flex;
        cursor: pointer;
  
        .paragraph {
          padding: 15px 24px;
          text-decoration: none;
          color: inherit;

          &.search-results-item-child-width {
            width: 33.3%
          }
  
          &:last-child {
            padding-right: 0;
          }
        }
  
        &:hover {
          background: #f0f0f0;
        }
  
        &.active {
          background: #D6EDF4;
        }
      }
  
      .search-results-item-message {
        margin: 0;
        padding: 0;
        display: flex;
  
        .paragraph {
          padding: 15px 24px 0 24px;
          text-decoration: none;
          color: inherit;
          font-style: italic;
        }
      }

      .search-alternatives {
        border-width: 0px;
        background: #fff;
        font-size: 13px;
        color: #555;
      }

      .search-result-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      
        tr {
          cursor: pointer;
      
          &:hover {
            background: #f0f0f0;
          }
      
          &.active {
            background: #D6EDF4;
          }
        }
      
        td {
          padding-top: 15px;
          padding-bottom: 15px;

          &:first-child {
            padding-left: 10px;
          }

          &:last-child {
            padding-right: 10px;
          }
        }
      }
    }
  }
}