/* variables */
:root {
  /* colors */
  --ey0-color-primary-hsl: 205, 0%, 50%;
  --ey0-color-bg-hsl: 0, 0%, 100%;
  --ey0-color-contrast-high-hsl: 205, 0%, 50%;
  --ey0-color-contrast-higher-hsl: 205, 0%, 50%;
  --ey0-color-contrast-low-hsl: 240, 4%, 65%;

  /* spacing */
  --ey0-space-sm: 0.75rem;
}

.searchbar .button,.searchbar input,.searchbar textarea,.searchbar select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
    border: none;
}


/* icons */
.searchbar .ey0-icon {
  height: var(--ey0-size, 1em);
  width: var(--ey0-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
:root {
  --expandable-search-size-compact: 2.2em;
  /* height and width - compact version /  height - expanded version */
  --expandable-search-size-expanded: 15em;
  /* width - expanded version */
  --expandable-search-radius: 50em;
  /* border radius */
  --expandable-search-icon-size: 1.2em;
  /* lens icon size */
  --expandable-search-btn-padding: 2px;
  /* gap between button and input element */
}

.searchbar .expandable-search {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.searchbar .expandable-search__input {
  width: var(--expandable-search-size-compact);
  height: var(--expandable-search-size-compact);
  color: transparent;
  overflow: hidden;
  border-radius: var(--expandable-search-radius);
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.3s, background-color 0.3s;
}
.searchbar .expandable-search__input::-webkit-input-placeholder {
  opacity: 0;
  color: transparent;
}
.searchbar .expandable-search__input::-moz-placeholder {
  opacity: 0;
  color: transparent;
}
.searchbar .expandable-search__input:-ms-input-placeholder {
  opacity: 0;
  color: transparent;
}
.searchbar .expandable-search__input::-ms-input-placeholder {
  opacity: 0;
  color: transparent;
}
.searchbar .expandable-search__input::placeholder {
  opacity: 0;
  color: transparent;
}
.searchbar .expandable-search__input:hover {
  cursor: pointer;
}
.searchbar .expandable-search__input:not(:focus):not(.expandable-search__input--has-content) {
  padding: 0px;
  /* padding = 0 if search is not expanded */
}
.searchbar .expandable-search__input:focus, .expandable-search__input.expandable-search__input--has-content {
  background-color: hsl(var(--ey0-color-bg-hsl));
  width: var(--expandable-search-size-expanded);
  padding-top: 0;
  padding-right: calc(var(--expandable-search-btn-padding, 2px) + var(--expandable-search-size-compact));
  padding-bottom: 0;
  outline: none;
  box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12), 0 0 0 2px hsl(var(--ey0-color-primary-hsl));
  color: hsl(var(--ey0-color-contrast-higher-hsl));
  cursor: auto;
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}
.searchbar .expandable-search__input:focus:not([class^=padding-]):not([class*=" padding-"]), .expandable-search__input.expandable-search__input--has-content:not([class^=padding-]):not([class*=" padding-"]) {
  padding-left: var(--ey0-space-sm);
}
.searchbar .expandable-search__input:focus::-webkit-input-placeholder, .expandable-search__input.expandable-search__input--has-content::-webkit-input-placeholder {
  opacity: 1;
  color: hsl(var(--ey0-color-contrast-low-hsl));
}
.searchbar .expandable-search__input:focus::-moz-placeholder, .expandable-search__input.expandable-search__input--has-content::-moz-placeholder {
  opacity: 1;
  color: hsl(var(--ey0-color-contrast-low-hsl));
}
.searchbar .expandable-search__input:focus:-ms-input-placeholder, .expandable-search__input.expandable-search__input--has-content:-ms-input-placeholder {
  opacity: 1;
  color: hsl(var(--ey0-color-contrast-low-hsl));
}
.searchbar .expandable-search__input:focus::-ms-input-placeholder, .expandable-search__input.expandable-search__input--has-content::-ms-input-placeholder {
  opacity: 1;
  color: hsl(var(--ey0-color-contrast-low-hsl));
}
.searchbar .expandable-search__input:focus::placeholder, .expandable-search__input.expandable-search__input--has-content::placeholder {
  opacity: 1;
  color: hsl(var(--ey0-color-contrast-low-hsl));
}
.searchbar .expandable-search__input:focus + .expandable-search__btn {
  pointer-events: auto;
}
.searchbar .expandable-search__input::-webkit-search-decoration, .expandable-search__input::-webkit-search-cancel-button, .expandable-search__input::-webkit-search-results-button, .expandable-search__input::-webkit-search-results-decoration {
  display: none;
}

.searchbar .expandable-search__btn {
  position: absolute;
  display: flex;
  top: var(--expandable-search-btn-padding, 2px);
  right: var(--expandable-search-btn-padding, 2px);
  width: calc(var(--expandable-search-size-compact) - var(--expandable-search-btn-padding, 2px)*2);
  height: calc(var(--expandable-search-size-compact) - var(--expandable-search-btn-padding, 2px)*2);
  border-radius: var(--expandable-search-radius);
  z-index: 1;
  pointer-events: none;
  transition: background-color 0.3s;
  border: none;
}
.searchbar .expandable-search__btn svg {
  display: block;
  margin: auto;
  height: var(--expandable-search-icon-size);
  width: var(--expandable-search-icon-size);
}
.searchbar .expandable-search__btn:hover {
  background-color: hsla(var(--ey0-color-contrast-higher-hsl), 0.1);
}
.searchbar .expandable-search__btn:focus {
  outline: none;
  background-color: hsla(var(--ey0-color-primary-hsl), 0.15);
}

/* utility classes */
.searchbar .ey0-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}