@layer molecules {
  .dropdown {
    width: 100%;
    max-width: 60rem;
    min-width: 21.5rem;
    position: relative;
  }
  .dropdown__button {
    width: 100%;
    text-align: start;
    padding: var(--ui-input-input-field-padding-top-bottom) var(--ui-input-input-field-padding-left-right);
    font-size: var(--body-s-font-size);
    line-height: var(--body-s-line-height);
    font-weight: var(--body-s-weight);
    letter-spacing: var(--body-s-letter-spacing);
    background: var(--ui-input-input-field-bg);
    border: solid calc(var(--ui-input-input-field-border-weight) * 1px) var(--ui-input-input-field-border);
    outline: none;
    color: var(--ui-input-input-field-text);
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: var(--ui-input-input-field-text-icon-gap);
    border-radius: var(--ui-input-input-field-border-radius);
  }
  .dropdown__button .icon {
    font-size: var(--icon-m);
    color: var(--ui-input-input-field-text);
  }
  .dropdown__button .icon:last-of-type {
    transition: all 0.5s;
  }
  .dropdown__button:hover {
    border-color: var(--ui-input-input-field-hover-border);
    color: var(--ui-input-input-field-hover-text);
  }
  .dropdown__button:hover span {
    color: var(--ui-input-input-field-hover-text);
  }
  .dropdown__button:hover .icon {
    color: var(--ui-input-input-field-hover-icon);
  }
  .dropdown__button:focus-within {
    border-color: var(--ui-input-input-field-active-border);
  }
  .dropdown__button:disabled {
    color: var(--ui-input-input-field-disabled-text);
    border-color: var(--ui-input-input-field-disabled-border);
    background-color: var(--ui-input-input-field-disabled-bg);
  }
  .dropdown__button:disabled:hover {
    color: var(--ui-input-input-field-disabled-text);
  }
  .dropdown__button:disabled:hover span {
    color: var(--ui-input-input-field-disabled-text);
  }
  .dropdown__button.show {
    background-color: var(--ui-input-input-field-active-bg);
    color: var(--ui-input-input-field-active-text);
    border-color: transparent;
    border-bottom-color: var(--ui-input-input-field-active-border);
    border-radius: 0;
  }
  .dropdown__button.show span {
    color: var(--ui-input-input-field-active-text);
  }
  .dropdown__button.show .icon {
    color: var(--ui-input-input-field-active-icon);
  }
  .dropdown__button.show .icon:last-of-type {
    transform: rotate(-180deg);
  }
  .dropdown__button.show + .dropdown__list {
    box-shadow: 0 var(--ui-input-dropdown-shadow-offset) var(--ui-input-dropdown-shadow-blur) var(--ui-input-dropdown-shadow);
    border-radius: 0 0 var(--ui-input-dropdown-border-radius) var(--ui-input-dropdown-border-radius);
  }
  .dropdown__button-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--ui-input-input-field-text);
  }
  .dropdown__list {
    display: none;
    position: absolute;
    width: 100%;
    background-color: var(--ui-input-dropdown-bg);
    box-shadow: none;
    border-radius: var(--ui-input-dropdown-border-radius);
    outline: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .dropdown__list.show {
    display: block;
    margin-top: 0 !important;
    z-index: 2;
  }
  .dropdown__link {
    transition: all 0.25s;
    text-decoration: none;
    padding: var(--sm-4) var(--sm-3);
    display: flex;
    align-items: center;
    gap: var(--xs-1);
    font-size: var(--body-s-font-size);
    line-height: var(--body-s-line-height);
    color: var(--ui-input-dropdown-items-default-text);
  }
  .dropdown__link .icon {
    font-size: var(--icon-m);
    line-height: var(--icon-m);
  }
  .dropdown__link:hover {
    background-color: var(--ui-input-dropdown-items-hover-bg);
    color: var(--ui-input-dropdown-items-hover-text);
  }
  .dropdown__link:focus, .dropdown__link:focus-visible, .dropdown__link:focus-within {
    background-color: var(--ui-input-dropdown-items-active-bg);
    color: var(--ui-input-dropdown-items-active-text);
  }
  .dropdown__link.active {
    background-color: var(--ui-input-dropdown-items-active-bg);
    color: var(--ui-input-dropdown-items-active-text);
    font-weight: var(--primitive-weight-bold);
  }
  .dropdown__link.active:hover {
    background-color: var(--ui-input-dropdown-items-hover-bg);
    color: var(--ui-input-dropdown-items-hover-text);
  }
  .dropdown .form-field--checkbox .form-field__label {
    padding: var(--sm-4) var(--sm-3);
  }
  .dropdown .form-field--checkbox .form-field__label:hover {
    background-color: var(--ui-input-dropdown-items-hover-bg);
  }
  .form-field__label {
    color: var(--ui-input-input-field-input-label);
  }
  .form-field__wrapper {
    display: flex;
  }
  .form-field__input, .form-field__textarea, .form-field__search {
    background-color: var(--ui-input-input-field-bg);
    font-size: var(--body-s-font-size);
    line-height: var(--body-s-line-height);
    border-radius: var(--ui-input-input-field-border-radius);
    border: none;
    outline: calc(var(--ui-input-input-field-border-weight) * 1px) solid var(--ui-input-input-field-border);
    color: var(--ui-input-input-field-text);
    width: 100%;
    padding: var(--ui-input-input-field-padding-top-bottom) var(--ui-input-input-field-padding-left-right);
    transition: all 0.25s;
  }
  .form-field__input:hover, .form-field__textarea:hover, .form-field__search:hover {
    background-color: var(--ui-input-input-field-hover-bg);
    outline-color: var(--ui-input-input-field-hover-border);
    color: var(--ui-input-input-field-hover-text);
  }
  .form-field__input:focus-within, .form-field__textarea:focus-within, .form-field__search:focus-within {
    outline-color: var(--ui-input-input-field-active-border);
    box-shadow: none;
    color: var(--ui-input-input-field-active-text);
    background-color: var(--ui-input-input-field-active-bg);
  }
  .form-field__input:focus-visible, .form-field__textarea:focus-visible, .form-field__search:focus-visible {
    outline-color: var(--ui-input-input-field-active-border);
    box-shadow: none;
    color: var(--ui-input-input-field-active-text);
  }
  .form-field__input:not(:-moz-placeholder), .form-field__textarea:not(:-moz-placeholder), .form-field__search:not(:-moz-placeholder) {
    outline-color: var(--ui-input-input-field-active-border);
    color: var(--ui-input-input-field-active-text);
  }
  .form-field__input:not(:placeholder-shown), .form-field__textarea:not(:placeholder-shown), .form-field__search:not(:placeholder-shown) {
    outline-color: var(--ui-input-input-field-active-border);
    color: var(--ui-input-input-field-active-text);
  }
  .form-field__input:disabled, .form-field__textarea:disabled, .form-field__search:disabled {
    background-color: var(--ui-input-input-field-disabled-bg);
    color: var(--ui-input-input-field-disabled-text);
    outline-color: var(--ui-input-input-field-disabled-border);
  }
  .form-field__input:invalid, .form-field__textarea:invalid, .form-field__search:invalid {
    outline-color: var(--error);
    color: var(--error);
  }
  .form-field__input:invalid + span, .form-field__textarea:invalid + span, .form-field__search:invalid + span {
    display: block;
  }
  .form-field__textarea {
    max-height: 12rem;
  }
  .form-field__search {
    outline-offset: 0;
  }
  .form-field__search-button {
    line-height: 100%;
    border: none;
    background-color: var(--ui-input-input-field-bg);
    inset-inline-end: var(--sm-4);
    top: 50%;
    transform: translateY(-50%);
  }
  .form-field__search-button .icon {
    color: var(--ui-input-input-field-icon);
  }
  .form-field__message {
    display: none;
  }
  .form-field__counter {
    position: absolute;
    inset-inline-end: var(--sm-2);
    bottom: var(--xs-1);
  }
  .form-field__autocomplete {
    width: 100%;
  }
  .form-field__autocomplete-list {
    max-height: 22rem;
    overflow-y: auto;
  }
  .form-field__autocomplete-link {
    color: var(--ui-input-input-field-text);
    text-decoration: none;
    display: block;
  }
  .form-field__autocomplete-link:hover {
    text-decoration: underline;
    color: var(--ui-input-input-field-active-text);
  }
  .form-field--success .form-field__wrapper {
    position: relative;
  }
  .form-field--success .form-field__wrapper::after {
    font-family: icomoon !important;
    content: "\e91d";
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
    inset-inline-end: var(--sm-2);
    bottom: var(--sm-3);
    background-color: var(--success);
    color: var(--ui-input-input-field-bg);
    text-align: center;
  }
  .form-field--error .form-field__wrapper {
    position: relative;
  }
  .form-field--error .form-field__wrapper::after {
    font-family: icomoon !important;
    content: "\e909";
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
    inset-inline-end: var(--sm-2);
    bottom: var(--sm-3);
    background-color: var(--error);
    color: var(--ui-input-input-field-bg);
    text-align: center;
  }
  .form-field--error .form-field__input {
    outline-color: var(--error);
  }
  .form-field--error .form-field__message {
    display: block;
  }
  .form-field--hide-status-icon .form-field__wrapper::after {
    display: none;
  }
  .form-field--checkbox .form-field__label {
    display: flex;
    align-items: center;
    padding: var(--sm-4) 0;
    width: 100%;
    color: var(--ui-input-selectors-text);
  }
  .form-field--checkbox .form-field__label::before {
    content: "";
    background: transparent;
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    border: solid calc(var(--general-focus-border-weight) * 1px) var(--ui-input-selectors-icon);
    border-radius: 0;
    transition: all 0.25s;
    margin-inline-end: var(--xs-1);
    color: var(--ui-input-selectors-icon);
    font-family: icomoon;
    font-weight: var(--primitive-weight-bold);
    font-size: var(--label-xs-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .form-field--checkbox .form-field__label:hover {
    color: var(--ui-input-selectors-hover-text);
  }
  .form-field--checkbox .form-field__label:hover::before {
    border-color: var(--ui-input-selectors-hover-icon);
  }
  .form-field--checkbox .form-field__label:focus-visible {
    outline: none;
  }
  .form-field--checkbox .form-field__checkbox {
    width: 0;
    height: 0;
    opacity: 0;
  }
  .form-field--checkbox .form-field__checkbox:focus-visible + .form-field__label {
    outline: solid calc(var(--general-focus-border-weight) * 1px) var(--ui-input-selectors-active-icon);
    outline-offset: calc(var(--general-focus-border-weight) * -1px);
  }
  .form-field--checkbox .form-field__checkbox:checked + .form-field__label {
    color: var(--ui-input-selectors-active-text);
  }
  .form-field--checkbox .form-field__checkbox:checked + .form-field__label::before {
    content: "\e91e";
    background: var(--ui-input-selectors-active-icon);
    border-color: var(--ui-input-selectors-active-icon);
    color: var(--general-bg);
  }
  .form-field--checkbox .form-field__checkbox:disabled + .form-field__label {
    pointer-events: none;
    color: var(--ui-input-selectors-disabled-text);
  }
  .form-field--checkbox .form-field__checkbox:disabled + .form-field__label::before {
    border-color: var(--ui-input-selectors-disabled-icon);
    background: var(--ui-input-selectors-disabled-icon);
  }
  .form-field--checkbox-multiline .form-field__label {
    align-items: normal;
  }
  .form-field--radio {
    width: -moz-max-content;
    width: max-content;
    color: var(--ui-input-selectors-text);
    padding: var(--ui-input-input-field-padding-top-bottom) var(--ui-input-input-field-padding-left-right);
  }
  .form-field--radio .form-field__wrapper {
    display: flex;
    align-items: center;
    gap: var(--ui-input-input-field-text-icon-gap);
    position: relative;
  }
  .form-field--radio .form-field__ghost {
    display: inline-block;
    width: var(--icon-m);
    height: var(--icon-m);
    min-width: var(--icon-m);
    min-height: var(--icon-m);
    transition: all 0.25s;
    border-radius: 100%;
    position: relative;
    pointer-events: none;
    border: solid calc(var(--general-focus-border-weight) * 1px) var(--ui-input-selectors-icon);
    background-color: transparent;
  }
  .form-field--radio .form-field__ghost::after {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
  }
  .form-field--radio .form-field__radio {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-m);
    height: var(--icon-m);
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    margin: 0;
  }
  .form-field--radio .form-field__radio:checked + span {
    border-color: var(--ui-input-selectors-active-icon);
  }
  .form-field--radio .form-field__radio:checked + span::after {
    content: "";
    background-color: var(--ui-input-selectors-active-icon);
  }
  .form-field--radio .form-field__radio:checked ~ label {
    color: var(--ui-input-selectors-active-text);
    font-weight: var(--primitive-weight-bold);
  }
  .form-field--radio .form-field__radio:disabled + span {
    border-color: var(--ui-input-selectors-disabled-icon);
  }
  .form-field--radio .form-field__radio:disabled + span::after {
    content: "";
    background-color: var(--ui-input-selectors-disabled-icon);
  }
  .form-field--radio .form-field__radio:disabled ~ label {
    color: var(--ui-input-selectors-disabled-text);
    pointer-events: none;
  }
  .form-field--radio:hover {
    color: var(--ui-input-selectors-hover-text);
  }
  .form-field--radio:hover .form-field__ghost {
    border-color: var(--ui-input-selectors-hover-icon);
  }
  .form-field--radio:has(:focus-visible) {
    outline: solid calc(var(--general-focus-border-weight) * 1px) var(--general-focus-border);
    outline-offset: calc(var(--general-focus-border-weight) * -1px);
  }
  .form-field--autocomplete-visible .form-field__search {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .search__list {
    max-height: 25rem;
    overflow-y: auto;
  }
  .search__link {
    color: var(--ui-input-dropdown-items-default-text);
  }
  .search__link:hover {
    color: var(--ui-input-dropdown-items-hover-text);
  }
  .form-check .form-check-label {
    color: var(--ui-input-selectors-text);
  }
  .form-check .form-check-input {
    height: 2.7rem;
    width: 5rem;
    border-radius: 2.5rem;
    border: solid 2px var(--ui-input-selectors-icon);
    box-shadow: unset;
    background-color: transparent !important;
    background-image: none !important;
    transition: all 0.3s ease-in-out;
    position: relative;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
  }
  .form-check .form-check-input::after {
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--ui-input-selectors-icon);
    top: 50%;
    inset-inline-start: 0.3rem;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
  }
  .form-check .form-check-input:checked {
    border-color: var(--ui-input-selectors-active-icon);
  }
  .form-check .form-check-input:checked::after {
    background-color: var(--ui-input-selectors-active-icon);
    inset-inline-start: calc(100% - 1.9rem);
  }
  .form-check .form-check-input:focus-visible {
    outline: calc(var(--ui-input-input-field-border-weight) * 1px) solid var(--ui-input-selectors-active-icon);
  }
  .filter-dropdown {
    width: 100%;
    position: relative;
  }
  .filter-dropdown__button {
    width: 100%;
    text-align: start;
    padding: var(--ui-input-input-field-padding-top-bottom) var(--ui-input-input-field-padding-left-right);
    background: var(--ui-input-input-field-bg);
    border: solid calc(var(--ui-input-input-field-border-weight) * 1px) var(--ui-input-input-field-border);
    outline: none;
    color: var(--ui-input-input-field-text);
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: var(--ui-input-input-field-padding-left-right);
    justify-content: space-between;
    text-transform: capitalize;
    border-radius: var(--ui-input-input-field-border-radius);
  }
  .filter-dropdown__button .icon {
    font-size: var(--icon-font-size);
    line-height: var(--icon-font-size);
    font-weight: var(--primitive-weight-bold);
    transition: all 0.5s;
    color: var(--ui-input-input-field-icon);
  }
  .filter-dropdown__button:hover, .filter-dropdown__button:focus-within {
    background-color: var(--ui-input-input-field-hover-bg);
    border-color: var(--ui-input-input-field-hover-border);
    color: var(--ui-input-input-field-hover-text);
  }
  .filter-dropdown__button:hover span, .filter-dropdown__button:focus-within span {
    color: var(--ui-input-input-field-hover-text);
  }
  .filter-dropdown__button:hover .icon, .filter-dropdown__button:focus-within .icon {
    color: var(--ui-input-input-field-hover-icon);
  }
  .filter-dropdown__button:focus-visible {
    border-color: var(--ui-input-input-field-active-border);
    box-shadow: inset 0 0 0 calc(var(--general-focus-border-weight) * 1px) var(--ui-input-input-field-active-border);
  }
  .filter-dropdown__button:disabled {
    color: var(--ui-input-input-field-disabled-text);
    border-color: var(--ui-input-input-field-disabled-border);
    background-color: var(--ui-input-input-field-disabled-bg);
  }
  .filter-dropdown__button:disabled:hover {
    color: var(--ui-input-input-field-disabled-text);
  }
  .filter-dropdown__button:disabled:hover span {
    color: var(--ui-input-input-field-disabled-text);
  }
  .filter-dropdown__button.show {
    color: var(--ui-input-input-field-active-text);
    border-color: transparent;
    border-bottom-color: var(--ui-input-input-field-active-border);
    background-color: var(--ui-input-input-field-active-bg);
    border-radius: 0;
    box-shadow: 0 var(--ui-input-dropdown-shadow-offset) var(--ui-input-dropdown-shadow-blur) var(--ui-input-dropdown-shadow);
  }
  .filter-dropdown__button.show span {
    color: var(--ui-input-input-field-active-text);
  }
  .filter-dropdown__button.show .icon {
    color: var(--ui-input-input-field-active-icon);
  }
  .filter-dropdown__button.show .icon:last-of-type {
    transform: rotate(-180deg);
  }
  .filter-dropdown__button.show + .filter-dropdown__list {
    box-shadow: 0 var(--ui-input-dropdown-shadow-offset) var(--ui-input-dropdown-shadow-blur) var(--ui-input-dropdown-shadow);
    border-radius: 0 0 var(--ui-input-dropdown-border-radius) var(--ui-input-dropdown-border-radius);
  }
  .filter-dropdown__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--ui-input-dropdown-bg);
    outline: none;
    box-shadow: none;
    border-radius: var(--ui-input-dropdown-border-radius);
    position: absolute;
    z-index: 2;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 0;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.5s ease, height 0.5s ease;
  }
  .filter-dropdown__list.show {
    margin-top: -1px !important;
    height: auto;
    clip-path: inset(-8px -8px 0 -8px);
    overflow-y: auto;
    max-height: 50rem;
  }
  .filter-dropdown__item {
    transition: background-color 0.3s ease;
    text-transform: capitalize;
  }
  .filter-dropdown__item:hover {
    background-color: var(--ui-input-dropdown-items-hover-bg);
  }
  .filter-dropdown__link {
    padding: var(--sm-4) var(--sm-3);
    text-decoration: none;
    display: block;
    color: var(--ui-input-dropdown-items-default-text);
  }
  .filter-dropdown__link:hover {
    color: var(--ui-input-dropdown-items-hover-text);
  }
  .filter-dropdown .form-field--checkbox .form-field__label {
    padding: var(--sm-4) var(--sm-3);
  }
  .filter-dropdown .form-field--checkbox .form-field__label:hover {
    background-color: var(--ui-input-dropdown-items-hover-bg);
  }
  @media (max-width: 767.98px) {
    .filter-dropdown__list {
      position: static !important;
      transform: translate(0, 0) !important;
    }
  }
  @media (min-width: 768px) {
    .filter-dropdown__button.show {
      color: var(--ui-input-input-field-active-text);
      background-color: var(--ui-input-input-field-active-bg);
      border-color: transparent;
      border-bottom-color: var(--ui-input-input-field-active-border);
      border-radius: 0;
    }
    .filter-dropdown__button.show span {
      color: var(--ui-input-input-field-active-text);
    }
  }
  .filter-bar {
    background: var(--ui-filter-bar-bkg);
  }
  .filter-bar .filter-dropdown__list {
    box-shadow: none;
  }
  .filter-bar .filter-dropdown__list.show {
    box-shadow: 0 var(--ui-input-dropdown-shadow-offset) var(--ui-input-dropdown-shadow-blur) var(--ui-input-dropdown-shadow);
  }
  .filter-bar__mobile-button {
    background: transparent;
    border: none;
    border-top: calc(var(--ui-input-input-field-border-weight) * 1px) solid var(--ui-input-input-field-border);
  }
  .filter-bar__mobile-button.collapsed .filter-bar__mobile-button-label-two {
    display: none;
  }
  .filter-bar__mobile-button.collapsed .filter-bar__icon-close {
    display: none;
  }
  .filter-bar__mobile-button.collapsed .filter-bar__icon-chevron {
    display: block;
  }
  .filter-bar__mobile-button.collapsed .filter-bar__mobile-button-label-one {
    display: block;
  }
  .filter-bar__mobile-button-label-one {
    display: none;
  }
  .filter-bar__mobile-button-label-two {
    display: block;
  }
  .filter-bar__icon-close {
    display: block;
  }
  .filter-bar__icon-chevron {
    display: none;
  }
  .filter-bar__right-contents {
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 767.98px) {
    body:has(.filter-bar__mobile-button:not(.collapsed)) {
      overflow: hidden;
    }
    .filter-bar {
      background: var(--ui-filter-bar-bkg);
    }
    .filter-bar__right {
      flex-wrap: wrap;
    }
    .filter-bar__right:has(.filter-bar__mobile-button:not(.collapsed)) {
      position: fixed;
      z-index: 101;
      background: var(--ui-input-input-field-disabled-bg);
      width: 100% !important;
      inset-inline-start: 0;
      top: 0;
      height: 100%;
      padding: var(--sm-2) 1.5rem var(--sm-2) 2.8rem;
    }
    .filter-bar__right:has(.filter-bar__mobile-button:not(.collapsed)) .filter-bar__mobile-button {
      border-top: 0px;
    }
    .filter-bar__right:has(.filter-bar__mobile-button:not(.collapsed)) .filter-bar__dropdown-container {
      max-height: 61.6rem;
      overflow-y: auto;
      padding-inline-end: 0.9rem;
      width: 100%;
    }
    .filter-bar__right-contents {
      flex-wrap: wrap;
      width: 100%;
    }
    .filter-bar__dropdown-list {
      gap: 0px !important;
    }
    .filter-bar .filter-dropdown__button {
      border: solid calc(var(--ui-input-input-field-border-weight) * 1px) var(--ui-input-input-field-border);
    }
    .filter-bar .collapsing {
      overflow: hidden;
      flex-direction: column;
    }
  }
  @media (min-width: 768px) {
    .filter-bar__reset {
      width: auto;
      white-space: nowrap;
    }
    .filter-bar__right-contents {
      width: 90%;
      position: relative;
    }
    .filter-bar__right-contents.collapse:not(.show) {
      display: flex;
    }
    .filter-bar .filter-dropdown {
      width: auto;
    }
    .filter-bar .filter-dropdown__button .icon {
      color: var(--ui-input-input-field-icon);
    }
    .filter-bar .filter-dropdown__button.show .icon {
      color: var(--ui-input-input-field-active-icon);
    }
  }
}