@use 'typography';

:host {
  display: block;
  width: 400px;

  .search-form {
    position: relative;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);

    ec-search-input {
      --search-input-padding: 0.75rem 6rem 0.75rem 1rem;
    }

    .search-btn {
      position: absolute;
      right: 1rem;
      top: 0.75rem;
      padding: 0;
      border: none;
      background-color: transparent;
      color: var(--color-quaternary);
      display: flex;
      align-items: center;
      transition: color 300ms ease;

      &::after {
        content: attr(data-text);
        font-size: 0.875rem;
        font-weight: 600;
        margin-left: 0.25rem;
        overflow: hidden;
        max-width: 3rem;
        transition: max-width 300ms ease;
      }

      &:not([disabled]):hover,
      &:not([disabled]):focus {
        color: var(--color-tertiary);
      }

      &[disabled] {
        color: var(--color-senary);

        &::after {
          max-width: 0;
        }
      }
    }
  }

  .results-cont {
    position: relative;
    text-align: left;
    z-index: 1;

    .results,
    .no-results {
      position: absolute;
      top: 0.25rem;
      border-radius: 0.25rem;
      border: 1px solid var(--color-senary);
      background-color: var(--color-bg);
      color: var(--color-tertiary);
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);
    }

    .results {
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style-type: none;
    }

    .no-results {
      @extend %body-short-01;
      color: var(--color-quinary);
      padding: 0.5rem 0.75rem;
      width: 100%;
      box-sizing: border-box;
    }
  }
}
