/* #region "../src/functions/offers/elements/offer-filter/offer-filter.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.offer-filter .offer-filter-grid {
  --cols-xs: 12;
  --cols-s: 6;
  --cols-sm: 4;
  --cols-lg: 3;
}
.offer-filter .offer-filter-form {
  --form-color: var(--primary);
  --form-text: var(--text-color);
  --form-hover: var(--primary-lighter-1);
  --form-active: var(--primary-darker-1);
  --form-focus: var(--primary);
  --form-disabled: #D1D1D1;
  --form-disabled-text: #B0B0B0;
  --form-checkbox-hover: rgb(var(--primary-rgb)/10%);
  --form-checkbox-active: rgb(var(--primary-rgb)/20%);
  --form-checkbox-size: 0.9375rem;
  --form-radio-hover: rgb(var(--primary-rgb)/10%);
  --form-radio-active: rgb(var(--primary-rgb)/20%);
  --form-radio-size: 0.9375rem;
  --form-input-background: #fff;
  --form-input-border: 1px solid var(--shade-color);
  --form-input-height: 56px;
  --form-input-padding-y: 0.75rem;
  --form-input-padding-x: 1rem;
  margin-bottom: clamp(1.25rem, 0.6442307692rem + 2.6923076923vw, 3rem);
}
.offer-filter .offer-filter-form input[type=text] {
  height: var(--form-input-height);
  outline: none;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  max-width: 100%;
  width: 100%;
  background-color: var(--form-input-background, #fff);
  border-radius: var(--base-radius);
  border: var(--form-input-border, 1px solid var(--shade-color));
  color: var(--form-text, 1px solid var(--text-color));
  font-size: 0.875rem;
  font-weight: 600;
}
.offer-filter .offer-filter-form input[type=text]:disabled, .offer-filter .offer-filter-form input[type=text].disabled {
  pointer-events: none;
  background-color: var(--form-disabled, #D1D1D1);
  color: var(--form-disabled-text, #B0B0B0);
  border-color: var(--form-disabled-text, #B0B0B0);
  cursor: no-drop;
}
.offer-filter .offer-filter-form input[type=text]:focus {
  outline: none;
}
.offer-filter .offer-filter-form input[type=text]:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.offer-filter .offer-raw-select:not(body.no-js *) {
  visibility: hidden;
  height: 0px;
}
.offer-filter .offer-search-and-submit {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.offer-filter .offer-filter-actions {
  margin-top: clamp(-1.75rem, -0.2355769231rem + -1.7307692308vw, -0.625rem);
  margin-bottom: clamp(1.25rem, 0.6442307692rem + 2.6923076923vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: first baseline;
  flex-wrap: wrap;
  column-gap: var(--layout-gap);
  row-gap: calc(0.5 * var(--layout-gap));
  line-height: 1.2;
}
.offer-filter .offer-filter-actions .offer-filter-reset {
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: underline;
}
:root.no-focus-visible .offer-filter .offer-filter-actions .offer-filter-reset:focus {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}

.offer-filter .offer-filter-actions .offer-filter-reset:focus:not(:focus-visible) {
  outline: none;
}
.offer-filter .offer-filter-actions .offer-filter-reset:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}
.offer-filter .offer-filter-actions .offer-filter-actions-label {
  white-space: nowrap;
}
.offer-filter .offer-filter-actions .offer-filter-actions-active {
  display: flex;
  align-items: first baseline;
  justify-content: flex-start;
  gap: clamp(0.375rem, 0.2884615385rem + 0.3846153846vw, 0.625rem);
  font-size: 0.75rem;
}
.offer-filter .offer-filter-actions .offer-filter-actions-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(0.375rem, 0.2884615385rem + 0.3846153846vw, 0.625rem);
}
.offer-filter .offer-filter-actions .offer-filter-actions-tags li {
  background-color: var(--grey-50);
  color: var(--grey-950);
  font-weight: 600;
  border-radius: var(--base-radius);
  padding: 0.4375rem 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.offer-filter .offer-filter-actions .offer-filter-actions-tags li:has(:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.offer-filter .offer-filter-actions .offer-filter-actions-tags li a {
  color: inherit;
  outline: none;
}
.offer-filter .offer-filter-actions .offer-filter-actions-tags li svg {
  display: block;
  box-sizing: content-box;
  padding: 0.25rem;
}
/* #endregion "../src/functions/offers/elements/offer-filter/offer-filter.scss" */

head{--webpack--css-wpce--offer-filter:&\.\.\/src\/functions\/offers\/elements\/offer-filter\/offer-filter\.scss;}
/*# sourceMappingURL=css-wpce--offer-filter.css.map*/