.vtmn-search{
  display:flex;
  position:relative;
  align-items:center;
  inline-size:100%;
}

.vtmn-search > input[type='search']{
  block-size:3rem;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%);
  background-color:hsl(0, 0%, 100%);
  border-radius:4px;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  font-weight:1.5;
  padding-block:0.75rem;
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  -webkit-padding-end:0.75rem;
          padding-inline-end:0.75rem;
  color:hsl(200, 100%, 4.7%);
  outline:none;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  inline-size:100%;
  border:0;
  transition:box-shadow 200ms ease-out;
  outline-offset:-2px;
}

.vtmn-search_variant--default > input[type='search']{
  block-size:3rem;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%);
  background-color:hsl(0, 0%, 100%);
  border-radius:4px;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  font-weight:1.5;
  padding-block:0.75rem;
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  -webkit-padding-end:0.75rem;
          padding-inline-end:0.75rem;
  color:hsl(200, 100%, 4.7%);
  outline:none;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  inline-size:100%;
  border:0;
  transition:box-shadow 200ms ease-out;
  outline-offset:-2px;
}

.vtmn-search > input[type='search']::-webkit-search-decoration,
.vtmn-search > input[type='search']::-webkit-search-cancel-button,
.vtmn-search > input[type='search']::-webkit-search-results-button,
.vtmn-search > input[type='search']::-webkit-search-results-decoration{
  -webkit-appearance:none;
          appearance:none;
}

.vtmn-search > input[type='search']:not(:disabled,
:focus):hover{
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%), 0 0 0 0.1875rem hsl(200, 60%, 94.1%);
}

.vtmn-search_variant--default
  > input[type='search']:not(:disabled,
:focus):hover{
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%), 0 0 0 0.1875rem hsl(200, 60%, 94.1%);
}

.vtmn-search > input[type='search']:not(:disabled):focus-visible{
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%);
}

.vtmn-search > input[type='search']:not(:disabled):focus{
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%);
}

.vtmn-search > input[type='search']::-moz-placeholder{
  color:hsl(211, 13%, 46.9%);
}

.vtmn-search > input[type='search']::placeholder{
  color:hsl(211, 13%, 46.9%);
}

.vtmn-search > input[type='search']:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-search
  > input[type='search']:disabled
  + .vtmn-search_buttons
  > .vtmn-btn{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-search_buttons{
  display:flex;
  flex-direction:row;
  position:absolute;
  inset-inline-end:0;
  text-align:end;
  -webkit-padding-end:0.125rem;
          padding-inline-end:0.125rem;
  -webkit-margin-end:0.125rem;
          margin-inline-end:0.125rem;
  -webkit-padding-start:0.125rem;
          padding-inline-start:0.125rem;
  -webkit-margin-start:0.125rem;
          margin-inline-start:0.125rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-search_buttons > .vtmn-btn{
  min-block-size:2.25rem;
  min-inline-size:2.25rem;
  block-size:2.25rem;
  inline-size:2.25rem;
  border-radius:50%;
}

.vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-']{
  font-size:1.25rem;
}

@media screen and (min-width: 1800px){

  .vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1799px){

  .vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px){

  .vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px){

  .vtmn-search_buttons > .vtmn-btn > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

.vtmn-search_buttons > .vtmn-btn > span.vtmx-close-line{
  color:hsl(211, 13%, 46.9%) !important;
}

.vtmn-search_size--small > input[type='search']{
  block-size:2rem;
  font-size:0.875rem;
  padding-block:0.75rem;
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  -webkit-padding-end:0.75rem;
          padding-inline-end:0.75rem;
}

.vtmn-search_size--small > .vtmn-search_buttons > .vtmn-btn{
  min-block-size:1.5rem;
  min-inline-size:1.5rem;
  block-size:1.5rem;
  inline-size:1.5rem;
}

.vtmn-search_size--small
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1rem;
}

.vtmn-search_size--medium > input[type='search']{
  block-size:3rem;
  font-size:1rem;
  padding-block:0.75rem;
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  -webkit-padding-end:0.75rem;
          padding-inline-end:0.75rem;
}

.vtmn-search_size--medium > .vtmn-search_buttons > .vtmn-btn{
  min-block-size:2.25rem;
  min-inline-size:2.25rem;
  block-size:2.25rem;
  inline-size:2.25rem;
}

.vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1.25rem;
}

@media screen and (min-width: 1800px){

  .vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1799px){

  .vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px){

  .vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px){

  .vtmn-search_size--medium
  > .vtmn-search_buttons
  > .vtmn-btn
  > span[class^='vtmx-']{
  font-size:1.25rem;
  }
}

.vtmn-search_variant--persistent > input[type='search']{
  box-shadow:none;
  background-color:hsl(210, 14.3%, 97.3%);
}

.vtmn-search_variant--persistent
  > input[type='search']:not(:disabled,
:focus):hover{
  box-shadow:0 0 0 0.1875rem hsl(200, 60%, 94.1%);
}

.vtmn-search_variant--persistent > input[type='search']::-moz-placeholder{
  color:hsl(209, 15.7%, 36.3%);
}

.vtmn-search_variant--persistent > input[type='search']::placeholder{
  color:hsl(209, 15.7%, 36.3%);
}

.vtmn-search_variant--persistent > .vtmn-search_buttons{
  background-color:hsl(210, 14.3%, 97.3%);
}

.vtmn-search_variant--on-content > input[type='search']{
  box-shadow:0 0.375rem 0.375rem 0 hsla(200, 100%, 24.5%, 0.1);
}

.vtmn-search_variant--on-content
  > input[type='search']:not(:disabled,
:focus):hover{
  box-shadow:0 0 0 0.1875rem hsl(200, 60%, 94.1%), 0 0.375rem 0.375rem 0 hsla(200, 100%, 24.5%, 0.1);
}

.vtmn-search_variant--on-content
  > input[type='search']:not(:disabled):focus-visible{
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%), 0 0.375rem 0.375rem 0 hsla(200, 100%, 24.5%, 0.1);
}

.vtmn-search_variant--on-content > input[type='search']:not(:disabled):focus{
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%), 0 0.375rem 0.375rem 0 hsla(200, 100%, 24.5%, 0.1);
}