.search-box {
  width: 100%;

  position: relative;
}

.input-wrapper {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 24px;

  background-color: var(--bg-primary);
  box-shadow: var(--shadow-primary);
  border-radius: 8px;

  input {
    width: 100%;
    color: var(--text-secondary);

    &::placeholder {
      color: var(--text-tertiary);
    }
  }
}

.results-wrapper {
  position: absolute;
  top: calc(100% - 4px);

  width: 100%;
  padding-top: 4px;

  display: flex;
  align-items: flex-start;
  flex-direction: column;

  background-color: var(--bg-primary);

  button {
    width: 100%;
    padding: 8px 16px;

    text-align: left;

    box-shadow: var(--shadow-primary);
    background-color: var(--bg-primary);

    &:not(:last-of-type) {
      border-bottom: 1px solid var(--gray-100);
    }
  }
}
