.archive__filter {
      position: relative;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
}

.filter__toggle-filter {
      position: relative;
      cursor: pointer;
      width: 36px;
      height: 36px;
}

.toggle-filter__show-filter,
.toggle-filter__hide-filter {
      position: absolute;
      width: 36px;
      height: 36px;
      transition: .5s;
      left: 0;
}

.filter__toggle-filter .toggle-filter__hide-filter {
      opacity: 0;
      visibility: hidden;
      left: -40px;
}

.filter__toggle-filter.active .toggle-filter__show-filter {
      opacity: 0;
      visibility: hidden;
      left: -40px;
}

.filter__toggle-filter.active .toggle-filter__hide-filter {
      opacity: 1;
      visibility: visible;
      left: 0;
}

.filter__description {
      position: absolute;
      right: 0;
      top: -40px;
      padding: 5px;
      background: #333;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      transition: .5s;
}

.filter__toggle-filter:hover+.filter__description {
      opacity: 1;
      visibility: visible;
}

.filter__date-filter {
      position: absolute;
      right: 100px;
      top: 0;
      padding: 10px;
      opacity: 0;
      visibility: hidden;
      transition: .5s;
}

.filter__date-filter.active {
      right: 70px;
      opacity: 1;
      visibility: visible;
}

.date-filter__form-apply input {
      background: #fff;
}

@media (max-width: 768px) {
      .filter__toggle-filter {
            display: none;
      }
      .filter__description {
            display: none;
      }
      .filter__date-filter {
            position: static;
            padding: 10px;
            opacity: 1;
            visibility: visible;
      }
}