@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.custom-welcome-search {
  &__title {
    width: 80%;
    max-width: 428px;
    margin: 0 auto var(--spacing-m) auto;
  }

  .custom-field-search {
    width: 100%;

    input[type='text'] {
      border-radius: var(--radius-s);

      @include mobile {
        height: 4.3rem;
        padding: var(--spacing-s) var(--spacing-xl) var(--spacing-s) calc(var(--spacing-xl) + var(--spacing-m));
        font-size: var(--font-size-labor);
      }

      &::placeholder {
        color: var(--color-grey-200);
      }
    }
  }

  .open-results {
    input[type='text'] {
      border-radius: var(--radius-s) var(--radius-s) 0 0;
    }
  }
}

.inside-radius {
  --radius-full: 25px; // Needed to keep radius consistency when results are showing

  .custom-welcome-search {
    .custom-field-search {
      input[type='text'] {
        border-radius: 25px;
      }
      &__dropdown {
        border-radius: 0 0 var(--radius-full) var(--radius-full);
        padding-bottom: var(--spacing-s);
      }
    }

    .open-results {
      input[type='text'] {
        border-radius: var(--radius-full) var(--radius-full) 0 0;
      }
    }
  }
}
