.vtmn-chip{
  min-inline-size:-moz-max-content;
  min-inline-size:max-content;
  max-inline-size:-moz-max-content;
  max-inline-size:max-content;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding-block:0.5rem;
  padding-inline:1rem;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%);
  border-radius:32px;
  background-color:hsl(0, 0%, 100%);
  position:relative;
  color:hsl(200, 100%, 30.8%);
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  outline:none;
  block-size:2.5rem;
  box-sizing:border-box;
  transition:box-shadow 200ms ease-out;
}

.vtmn-chip > .vtmn-badge{
  font-weight:400;
  transform:translateX(0.375rem);
}

.vtmn-chip:not([aria-disabled='true']):hover{
  background-color:hsla(200, 100%, 4.7%, 0.05);
  cursor:pointer;
}

.vtmn-chip:not([aria-disabled='true']):active{
  background-color:hsla(200, 100%, 4.7%, 0.15);
}

.vtmn-chip:not([aria-disabled='true']):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%), 0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-chip[aria-disabled='true']{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-chip[aria-pressed='true']{
  box-shadow:none;
  background-color:hsl(200, 100%, 36.9%);
  color:hsl(0, 0%, 100%);
}

.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']):hover{
  background-color:hsla(200, 100%, calc(36.9% * 0.85), 1);
}

.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']):active{
  background-color:hsla(200, 100%, calc(36.9% * 0.7), 1);
}

.vtmn-chip[aria-pressed='true']::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  block-size:1.5rem;
  inline-size:1.5rem;
  position:relative;
  inset-inline-start:-0.25rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-chip_size--small{
  font-size:0.875rem;
  padding-block:0.375rem;
  padding-inline:0.75rem;
  block-size:2rem;
}

.vtmn-chip_size--small > .vtmn-badge{
  transform:translateX(0.5rem);
}

.vtmn-chip_size--medium{
  block-size:2.5rem;
  padding-block:0.5rem;
  padding-inline:1rem;
  font-size:1rem;
}

.vtmn-chip_size--medium > .vtmn-badge{
  transform:translateX(0.375rem);
}

.vtmn-chip_variant--filter > .vtmn-badge{
  font-weight:400;
  transform:translateX(0.3125rem);
}

.vtmn-chip_variant--filter.vtmn-chip_size--medium > .vtmn-badge{
  transform:translateX(0.3125rem);
}

.vtmn-chip_variant--filter[aria-pressed='true']{
  -webkit-padding-start:1rem;
          padding-inline-start:1rem;
}

.vtmn-chip_variant--filter[aria-pressed='true']::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  block-size:1.5rem;
  inline-size:1.5rem;
  position:relative;
  inset-inline-start:-0.25rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-chip_variant--filter.vtmn-chip_size--small[aria-pressed='true']::before{
  inset-inline-start:-0.375rem;
}

.vtmn-chip_variant--filter.vtmn-chip_size--medium[aria-pressed='true']::before{
  inset-inline-start:-0.25rem;
}

.vtmn-chip_variant--action > span[class^='vtmx-']{
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
  inline-size:1.5rem;
  block-size:1.5rem;
  font-size:1.5rem;
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--action > svg{
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
  inline-size:1.5rem;
  block-size:1.5rem;
  font-size:1.5rem;
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--action.vtmn-chip_size--small > span[class^='vtmx-'],
.vtmn-chip_variant--action.vtmn-chip_size--small > svg{
  transform:translateX(-0.25rem);
}

.vtmn-chip_variant--action.vtmn-chip_size--medium > span[class^='vtmx-'],
.vtmn-chip_variant--action.vtmn-chip_size--medium > svg{
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--single-choice[aria-pressed='true']::before{
  content:initial;
  -webkit-mask:initial;
          mask:initial;
  -webkit-mask-size:initial;
          mask-size:initial;
  block-size:initial;
  inline-size:initial;
  position:initial;
  inset-inline-start:initial;
  background-color:initial;
}

.vtmn-chip_variant--input > span[class^='vtmx-'],
.vtmn-chip_variant--input > svg{
  transform:translateX(-0.375rem);
  font-size:1.25rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--small > span[class^='vtmx-'],
.vtmn-chip_variant--input.vtmn-chip_size--small > svg{
  transform:translateX(-0.25rem);
  font-size:1rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--medium > span[class^='vtmx-'],
.vtmn-chip_variant--input.vtmn-chip_size--medium > svg{
  transform:translateX(-0.375rem);
  font-size:1.25rem;
}

.vtmn-chip_variant--input > img{
  block-size:1.25rem;
  inline-size:1.25rem;
  border-radius:50%;
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--input.vtmn-chip_size--small > img{
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--input.vtmn-chip_size--medium > img{
  transform:translateX(-0.375rem);
}

.vtmn-chip_variant--input[aria-pressed='true']{
  -webkit-padding-end:0.375rem;
          padding-inline-end:0.375rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--small[aria-pressed='true']{
  -webkit-padding-end:0.25rem;
          padding-inline-end:0.25rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--medium[aria-pressed='true']{
  -webkit-padding-end:0.375rem;
          padding-inline-end:0.375rem;
}

.vtmn-chip_variant--input[aria-pressed='true']::before{
  content:initial;
  -webkit-mask:initial;
          mask:initial;
  -webkit-mask-size:initial;
          mask-size:initial;
  block-size:initial;
  inline-size:initial;
  position:initial;
  inset-inline-start:initial;
  background-color:initial;
}

.vtmn-chip_variant--input[aria-pressed='true'] > .vtmn-btn--icon-alone{
  -webkit-margin-start:0.375rem;
          margin-inline-start:0.375rem;
  padding:0;
  block-size:1.5rem;
  inline-size:1.5rem;
  border-radius:50%;
}

.vtmn-chip_variant--input[aria-pressed='true']
  > .vtmn-btn--icon-alone
  > span[class^='vtmx-'],
.vtmn-chip_variant--input[aria-pressed='true'] > .vtmn-btn--icon-alone > svg{
  font-size:1.5rem;
}

.vtmn-chip_variant--input[aria-pressed='true']:not(
    [aria-disabled='true']
  ):hover{
  cursor:initial;
  background-color:hsl(200, 100%, 36.9%);
}

.vtmn-chip_variant--input[aria-pressed='true']:not(
    [aria-disabled='true']
  ):active{
  background-color:hsl(200, 100%, 36.9%);
}

.vtmn-chip:not(.vtmn-chip--disabled):hover{
  background-color:hsla(200, 100%, 4.7%, 0.05);
  cursor:pointer;
}

.vtmn-chip:not(.vtmn-chip--disabled):active{
  background-color:hsla(200, 100%, 4.7%, 0.15);
}

.vtmn-chip:not(.vtmn-chip--disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%), 0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-chip.vtmn-chip--disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-chip.vtmn-chip--selected{
  box-shadow:none;
  background-color:hsl(200, 100%, 36.9%);
  color:hsl(0, 0%, 100%);
}

.vtmn-chip.vtmn-chip--selected:not(.vtmn-chip--disabled):hover{
  background-color:hsla(200, 100%, calc(36.9% * 0.85), 1);
}

.vtmn-chip.vtmn-chip--selected:not(.vtmn-chip--disabled):active{
  background-color:hsla(200, 100%, calc(36.9% * 0.7), 1);
}

.vtmn-chip.vtmn-chip--selected::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  height:1.5rem;
  width:1.5rem;
  position:relative;
  left:-0.25rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-chip_variant--input.vtmn-chip--selected:not(.vtmn-chip--disabled):hover{
  cursor:initial;
  background-color:hsl(200, 100%, 36.9%);
}

.vtmn-chip_variant--input.vtmn-chip--selected:not(.vtmn-chip--disabled):active{
  background-color:hsl(200, 100%, 36.9%);
}

.vtmn-chip_variant--filter.vtmn-chip--selected{
  padding-left:1rem;
}

.vtmn-chip_variant--filter.vtmn-chip--selected::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.667 10.115 6.128-6.129.943.943L6.667 12 2.424 7.757l.943-.942 3.3 3.3Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  height:1.5rem;
  width:1.5rem;
  position:relative;
  left:-0.25rem;
  background-color:hsl(0, 0%, 100%);
}

.vtmn-chip_variant--filter.vtmn-chip_size--small.vtmn-chip--selected::before{
  left:-0.375rem;
}

.vtmn-chip_variant--filter.vtmn-chip_size--medium.vtmn-chip--selected::before{
  left:-0.25rem;
}

.vtmn-chip_variant--single-choice.vtmn-chip--selected::before{
  content:initial;
  -webkit-mask:initial;
          mask:initial;
  -webkit-mask-size:initial;
          mask-size:initial;
  height:initial;
  width:initial;
  position:initial;
  left:initial;
  background-color:initial;
}

.vtmn-chip_variant--input.vtmn-chip--selected{
  padding-right:0.375rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--small{
  padding-right:0.25rem;
}

.vtmn-chip_variant--input.vtmn-chip_size--medium{
  padding-right:0.375rem;
}

.vtmn-chip_variant--input::before{
  content:initial;
  -webkit-mask:initial;
          mask:initial;
  -webkit-mask-size:initial;
          mask-size:initial;
  height:initial;
  width:initial;
  position:initial;
  left:initial;
  background-color:initial;
}

.vtmn-chip_variant--input > .vtmn-btn--icon-alone{
  margin-left:0.375rem;
  padding:0;
  height:1.5rem;
  width:1.5rem;
  border-radius:50%;
}

.vtmn-chip_variant--input > .vtmn-btn--icon-alone > span[class^='vtmx-']{
  font-size:1.5rem;
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
}

.vtmn-chip_variant--input > .vtmn-btn--icon-alone > svg{
  font-size:1.5rem;
  color:hsl(200, 100%, 30.8%);
  fill:hsl(200, 100%, 30.8%);
}