/*
 * EPHARO AI 2060
 * Search clear control
 *
 * Doplnkova vrstva.
 * Nesmie menit povodnu search logiku.
 */

.eph-search-clear-host {
  position: relative !important;
}

.eph-search-clear-control {
  position: absolute;
  top: 50%;
  right: 132px;
  z-index: 20;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: transparent;
  color: #557063;

  font: inherit;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-50%) scale(.88);

  transition:
    opacity .16s ease,
    visibility .16s ease,
    transform .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.eph-search-clear-control.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(-50%) scale(1);
}

.eph-search-clear-control:hover,
.eph-search-clear-control:focus-visible {
  background:
    rgba(21, 107, 59, .10);

  color: #126b3b;

  box-shadow:
    0 0 0 5px rgba(21, 107, 59, .055);
}

.eph-search-clear-control:active {
  transform:
    translateY(-50%)
    scale(.92);
}

.eph-search-clear-control:focus-visible {
  outline:
    2px solid rgba(21, 107, 59, .36);

  outline-offset: 2px;
}

/*
 * Rezerva pre X, mikrofon a odoslanie.
 */
.eph-search-clear-host input[type="search"],
.eph-search-clear-host input[type="text"] {
  padding-right: 174px !important;
}

/*
 * Safari moze kreslit vlastne X.
 * Pouzijeme iba nase jednotne EPHARO X.
 */
.eph-search-clear-host input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

@media (max-width: 720px) {
  .eph-search-clear-control {
    right: 105px;
    width: 32px;
    height: 32px;
    font-size: 24px;
  }

  .eph-search-clear-host input[type="search"],
  .eph-search-clear-host input[type="text"] {
    padding-right: 145px !important;
  }
}