ihk24/gfi-ihk-2024/stories/atoms/search-input/search-input.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

input.search-field {
  position: relative;
  display: block;
  border-radius:var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
  width: calc(100% - 1px);
  height: 80px;
  background-color: white;
  padding: 24px 90px 24px 24px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  line-height: 32px;
  color: var(--theme-color-primary);
  border: 2px solid var(--theme-color-secondary-intensed);
  transition: 0.25s ease;
  @include focus-visible;

  @media(max-width: 767px) {
    height: 70px;
    padding: 10px 50px 10px 16px;
    font-size: 18px;
    line-height: 30px;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  &:focus, &:active, &.focus-visible, &.focus-visible:focus {
    box-shadow: 0 0 10px var(--theme-color-secondary-intensed), 0 0 4px var(--theme-color-secondary-intensed);
  }

  &::-webkit-input-placeholder {
    color: var(--theme-color-link-hover);
  }
  &::-moz-placeholder {
    color: var(--theme-color-link-hover);
  }
  &:-ms-input-placeholder {
    color: var(--theme-color-link-hover);
  }
  &:-moz-placeholder {
    color: var(--theme-color-link-hover);
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 50px white inset !important;
  }

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
}