.filter{background-color:var(--color-white);padding-top:var(--spacing-default-top);padding-bottom:var(--spacing-default-top);grid-template-columns:1fr max-content;align-items:start;width:100%;display:grid}.filter-button{padding:0;display:block}.filter-button:hover{color:var(--color-primary)}.type-filter .filter-button{padding-right:calc(5*var(--spacing-unit));padding-bottom:calc(2*var(--spacing-unit));padding-left:var(--spacing-default-horizontal)}.tag-filter .filter-button{padding-right:var(--spacing-default-horizontal);grid-area:1/1;justify-self:end}.tag-filter--active .filter-button{padding-bottom:var(--spacing-default-top)}.tag-filter--active .filter-button:hover{color:var(--color-primary-light)}.tag-filter .filter-button{cursor:pointer}.type-filter{color:var(--color-primary);z-index:20;grid-area:1/1/auto/3;width:100%}.type-filter--inactive{opacity:.3;pointer-events:none}.tag-filter{color:var(--color-primary-light);z-index:20;grid-area:1/2}.tag-filter--active{width:100%;color:var(--color-primary);box-shadow:0 32px 45px -31px var(--color-primary);grid-area:1/1/auto/3;grid-template-rows:min-content min-content 1fr;grid-template-columns:1fr;justify-self:end;display:grid;position:absolute}.tag-filter__close,.tag-filter__background{display:none}.tag-filter--active .tag-filter__close{color:var(--color-black);margin-bottom:var(--spacing-default-bottom);cursor:pointer;grid-area:3/1;place-self:start center;width:max-content;transition:color .1s ease-in-out;display:inline-block}.tag-filter--active .tag-filter__close:hover{color:var(--color-gray);transition:color .1s ease-in-out}.tag-filter--active .tag-filter__background{background-color:var(--color-primary-light);z-index:-10;grid-area:2/1/4;min-height:60vh;display:block;position:relative}.filter-items{flex-wrap:wrap;display:flex}.tag-filter .filter-items{margin-top:calc(5*var(--spacing-unit));grid-area:2/1}.type-filter .filter-items{padding-left:var(--spacing-default-horizontal);margin-left:calc(-2*var(--spacing-unit))}.tag-filter .filter-items,.type-filter .filter-items--inactive{display:none}.tag-filter--active .filter-items{margin-left:10vw;margin-right:10vw;margin-bottom:var(--spacing-default-top);display:block}.filter-item{width:max-content;margin:calc(2*var(--spacing-unit))calc(2*var(--spacing-unit));align-items:center;display:flex}.filter-item label{cursor:pointer;color:var(--color-primary)}.filter-item input:checked+label{color:var(--color-primary)}.filter-item input{z-index:10;opacity:0;margin:0;position:relative}.type-filter .filter-item input+.styled-filter-checkbox:before{width:14px;height:14px;box-shadow:0 0 0 2px var(--color-primary);background-color:var(--color-white);content:"";border-radius:50%;display:inline-block;transform:translate(-13px,3px)}.type-filter .filter-item input:checked+.styled-filter-checkbox:before{border:3px solid var(--color-white);background-color:var(--color-primary);width:9px;height:9px;box-shadow:0 0 0 2px var(--color-primary)}.tag-filter--active .filter-item{border:1px solid var(--color-black);display:inline-block}.tag-filter .filter-item input{display:none}.tag-filter .filter-item input:checked+.styled-filter-checkbox:after{color:var(--color-white);background-color:var(--color-primary);content:"×";padding:6px 14px 10px 0;display:inline-block}.tag-filter label{display:flex}.tag-filter label.t--iota{color:var(--color-black);font-family:var(--font-family-eta-secondary);font-weight:var(--font-weight-eta-secondary);font-size:var(--font-size-eta-secondary);line-height:var(--line-height-eta-secondary);letter-spacing:var(--letter-spacing-eta-secondary)}.tag-filter .filter-item-text{order:1;padding:6px 14px 10px;display:block}.tag-filter .filter-item input:checked+.styled-filter-checkbox+.filter-item-text{color:var(--color-white);background-color:var(--color-primary);padding:6px 14px 10px}.tag-filter .styled-filter-checkbox{order:2}.filter--circularity .tag-filter,.filter--cooperation .tag-filter{color:var(--color-gray-mid)}@media (min-width:500px){.type-filter .filter-items--inactive{display:flex}.type-filter .filter-button{padding-bottom:0}}@media (min-width:800px){.type-filter{grid-column:1;display:flex}}
