@shopware-ag/meteor-component-library/dist/mt-data-table-filter.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-data-table-filter {
&[data-v-afdb8a25] {
  display: inline-flex;
}
&[data-v-afdb8a25] > * {
    height: var(--scale-size-24);
    display: grid;
    place-items: center;
}
}
.mt-data-table-filter__property[data-v-afdb8a25] {
  border: 1px solid var(--color-border-primary-default);
  border-right: 0 none;
  border-top-left-radius: var(--border-radius-xs);
  border-bottom-left-radius: var(--border-radius-xs);
  color: var(--color-text-primary-default);
  padding-inline: var(--scale-size-8);
}
.mt-data-table-filter__rule[data-v-afdb8a25] {
  border-top: 1px solid var(--color-border-primary-default);
  border-bottom: 1px solid var(--color-border-primary-default);
  padding-right: var(--scale-size-4);
}
.mt-data-table-filter__option {
&[data-v-afdb8a25] {
  color: var(--color-text-primary-default);
  font-size: var(--font-size-2xs);
  font-family: var(--font-family-body);
  line-height: var(--font-line-height-2xs);
  border-top: 1px solid var(--color-border-primary-default);
  border-bottom: 1px solid var(--color-border-primary-default);
  padding-inline: var(--scale-size-4) var(--scale-size-8);
}
& button[data-v-afdb8a25] {
    outline: 0 none;
}
&[data-v-afdb8a25]:has(button:hover) {
    background-color: var(--color-interaction-secondary-hover);
}
&[data-v-afdb8a25]:has(button:focus-visible) {
    background-color: var(--color-background-brand-default);
    outline: var(--color-border-brand-default) solid 1px;
    outline-offset: -1px;
}
}
.mt-data-table-filter__remove-button {
&[data-v-afdb8a25] {
  color: var(--color-icon-primary-default);
  border-top-right-radius: var(--border-radius-xs);
  border-bottom-right-radius: var(--border-radius-xs);
  border: 1px solid var(--color-border-primary-default);
  outline: 0 none;
  position: relative;
  height: var(--scale-size-24);
  width: var(--scale-size-24);
}
& .mt-icon[data-v-afdb8a25] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
&[data-v-afdb8a25]:focus-visible {
    background-color: var(--color-background-brand-default);
    border-color: var(--color-border-brand-default);
}
&[data-v-afdb8a25]:hover {
    background-color: var(--color-interaction-secondary-hover);
}
}