.filters {
  margin-y: 30px;
}

.filters__item {
  position: relative;
  margin-bottom: 40px;
  padding: 5px 15px;
  border-left: 1px solid color(black lightness(+20%));
}
.filters__item .filters__item {
  margin-left: 20px;
}
.filters__item .filters__item:first-of-type {
  margin-top: 12px;
}

.filters__item .title {
  color: white;
}
.filters__item[tabindex] {
  cursor: pointer;
}
.filters__item.filters__item--selected .title,
.filters__item[tabindex]:focus .title,
.filters__item[tabindex]:hover .title {
  color: $yellow;
}
.filters__item.filters__item--selected {
  border-left-color: $yellow;
}

.filters__item:focus {
  outline: none;
}
.filters__item:focus::after {
  content: "";
  position: absolute 0 0 0 9px;
  box-shadow: 0 0 0 3px color($primary lightness(+35%)),
    0 0 0 1.5px color($primary lightness(+35%));
}
.js-focus-visible .filters__item:focus:not(.focus-visible)::after {
  box-shadow: none;
}

.filters__move {
  position: absolute 0 auto auto -32px;
}
.filters__move__up,
.filters__move__cross,
.filters__move__down {
  position: relative;
  display: block;
  size: 25px;
  cursor: pointer;
  border-radius: 4px;
}
.filters__move__up:focus,
.filters__move__cross:focus,
.filters__move__down:focus {
  outline: none;
  box-shadow: 0 0 0 3px color($primary lightness(+35%)),
    0 0 0 1.5px color($primary lightness(+35%));
}
.js-focus-visible .filters__move__up:focus:not(.focus-visible),
.js-focus-visible .filters__move__cross:focus:not(.focus-visible),
.js-focus-visible .filters__move__down:focus:not(.focus-visible) {
  box-shadow: none;
}
.filters__move__up::before,
.filters__move__up::after,
.filters__move__down::before,
.filters__move__down::after {
  position: absolute 50% auto auto 50%;
  content: "";
  display: block;
  size: 12px 2px;
  background: white;
}
.filters__move__up::before,
.filters__move__down::before {
  transform: translateX(-50%) translateX(-3px) rotate(-45deg);
}
.filters__move__up::after,
.filters__move__down::after {
  transform: translateX(-50%) translateX(4px) rotate(45deg);
}
.filters__move__down {
  transform: translateX(-1px) scaleY(-1);
}
.filters__move__cross::before,
.filters__move__cross::after {
  position: absolute 50% auto auto 50%;
  content: "";
  display: block;
  size: 12px 2px;
  background: white;
}
.filters__move__cross::before {
  transform: translateY(-2px) translateX(-50%) rotate(-45deg);
}
.filters__move__cross::after {
  transform: translateY(-2px) translateX(-50%) rotate(45deg);
}

.filters__use {
  margin-left: 20px;
  margin-y: 10px;
}
.filters__use::before,
.filters__use::after {
  display: block;
  margin-left: -20px;
}
.filters__use::before {
  content: "use: [";
}
.filters__use::after {
  content: "]";
}

.filters__use__item {
  margin-y: 10px;
}
.filters__use__item input {
  width: 100%;
  max-width: 250px;
  margin-top: 0;
  margin-bottom: 5px;
}

.filters__globs {
  display: flex;
}
.filters__globs__title {
  margin-right: 10px;
}
.filters__globs__content {
  flex: 1;
  margin: -4px -4px -4px 0;
  padding: 4px;
  font-size: 16px;
}
.filters__globs__content:focus {
  outline: none;
  box-shadow: 0 0 0 3px color($primary lightness(+35%)),
    0 0 0 1.5px color($primary lightness(+35%));
}

.filters__use__data {
  position: relative;
  margin: -4px -4px -4px 0;
  padding: 4px 4px 4px 20px;
  transition: 0.08s;
}
.filters__use__data.--error {
  background: #330808;
}
.filters__use__data::before,
.filters__use__data::after {
  display: block;
  margin-left: -15px;
}
.filters__use__data::before {
  content: "{";
}
.filters__use__data::after {
  content: "}";
}
.filters__use__data:focus {
  outline: none;
  box-shadow: 0 0 0 3px color($primary lightness(+35%)),
    0 0 0 1.5px color($primary lightness(+35%));
}
.filters__use__data.--error:focus {
  box-shadow: 0 0 0 3px $red, 0 0 0 1.5px $red;
}

.filters__use__cross {
  position: relative;
  display: inline-block;
  size: 25px;
  margin-bottom: -8px;
  margin-left: -10px;
  margin-right: 0;
  cursor: pointer;
  border-radius: 4px;
}
.filters__use__cross::before,
.filters__use__cross::after {
  content: "";
  position: absolute;
  size: 15px 2px;
  background: white;
  transform-origin: center center;
}
.filters__use__cross::before {
  transform: translateX(4px) translateY(11px) rotate(-45deg);
}
.filters__use__cross::after {
  transform: translateX(4px) translateY(11px) rotate(45deg);
}
.filters__use__cross:focus {
  outline: none;
  box-shadow: 0 0 0 3px color($primary lightness(+35%)),
    0 0 0 1.5px color($primary lightness(+35%));
}
.js-focus-visible .filters__use__cross:focus:not(.focus-visible) {
  box-shadow: none;
}
