.elementor-widget-the7-search-expand-widget {
  --width-unit: 100%;
  --the7-top-input-border-width: 0px;
  --the7-right-input-border-width: 0px;
  --the7-bottom-input-border-width: 0px;
  --the7-left-input-border-width: 0px;
}

.elementor-widget-the7-search-expand-widget.elementor-widget__width-auto {
  --width-unit: 100vw;
}

.elementor-widget-the7-search-expand-widget .the7-search-form {
  position: relative;
  min-width: ~"min(var(--toggle-width, 40px) + var(--box-right-padding, 0px) + var(--box-left-padding, 0px) + var(--the7-right-input-border-width, 0px) + var(--the7-left-input-border-width, 0px), var(--width-unit, 100%))";
  min-height: ~"max(var(--input-height, 40px) + var(--the7-top-input-border-width, 0px) + var(--the7-bottom-input-border-width, 0px), var(--toggle-height, 40px), var(--submit-height, 40px))";
}

.the7-search-form input::-webkit-input-placeholder {
  opacity: 1;
  color: var(--placeholder-color, var(--the7-secondary-text-color));
}

.the7-search-form input:-moz-placeholder {
  opacity: 1;
  color: var(--placeholder-color, var(--the7-secondary-text-color));
}

.the7-search-form input:focus::-webkit-input-placeholder {
  opacity: 1;
  color: var(--placeholder-color-focus, #FFFFFF00);
}

.the7-search-form input:focus:-moz-placeholder {
  opacity: 1;
  color: var(--placeholder-color-focus, #FFFFFF00);
}

.elementor-widget-the7-search-expand-widget .the7-search-expand-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: var(--flex-direction, row);
  padding: 0px 0px 0px var(--left-input-padding, 40px);
  background: var(--the7-content-boxes-bg);
  border-width: var(--the7-top-input-border-width, 0px) var(--the7-right-input-border-width, 0px) var(--the7-bottom-input-border-width, 0px) var(--the7-left-input-border-width, 0px);
  border-style: var(--the7-box-border-style, none);
  border-radius: 100px;
  left: var(--left-expand, 0);
  right: var(--right-expand, auto);
  width: ~"min(var(--toggle-width, 40px) + var(--box-right-padding, 0px) + var(--box-left-padding, 0px) + var(--the7-right-input-border-width, 0px) + var(--the7-left-input-border-width, 0px), 100%)";
  min-height: ~"max(var(--input-height, 40px) + var(--the7-top-input-border-width, 0px) + var(--the7-bottom-input-border-width, 0px), var(--toggle-height, 40px), var(--submit-height, 40px))";
  max-height: 100%;
  height: 100%;
  margin: 0;
  max-width: var(--width-unit, 100%);
  transition: width var(--expand-timing, 300ms);
}

.the7-search-form input[type="search"],
.the7-search-form button {
  margin-bottom: 0;
  border: 0;
  padding: 0;
  display: inline-flex;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.the7-search-form input[type="search"]:focus,
.the7-search-form button:focus {
  outline: 0;
}

.elementor-widget-the7-search-expand-widget .the7-search-form__input[type="search"] {
  font: var(--the7-base-font);
  box-shadow: none;
}

.elementor-widget-the7-search-expand-widget .the7-search-expand__container {
  display: flex;
  align-self: stretch;
  width: calc(100% - var(--toggle-icon-spacing, 0px));
  order: var(--input-order);
  opacity: 0;
  visibility: hidden;
  margin: var(--input-margin);
  transition: opacity 0.25s;
}

.elementor-widget-the7-search-expand-widget .show-input.the7-search-form .the7-search-expand-wrap {
  width: ~"min(var(--expand-width-focus, 300px), var(--width-unit, 100%))";
}

.elementor-widget-the7-search-expand-widget .show-input .the7-search-expand__container {
  opacity: 1;
  visibility: visible;
  transition-delay: calc(var(--expand-timing, 250ms) - 250ms);
}

.the7-search-form__input {
  order: 1;
  width: calc(100% - var(--icon-width, 40px) - var(--toggle-icon-spacing, 0px));
  min-height: unset !important;
  transition: color 0.3s;
  margin-bottom: 0 !important;
  color: var(--the7-secondary-text-color);

  &:focus {
    color: var(--the7-base-color);
  }
}

.the7-search-form__input::-webkit-input-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.the7-search-form__input:-ms-input-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.the7-search-form__input::-moz-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.the7-search-form__input:-moz-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.the7-search-form__input::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.6;
}

.the7-search-form__submit svg {
  fill: var(--e-search-form-submit-text-color, #fff);
  width: var(--e-search-form-submit-icon-size, 16px);
  height: var(--e-search-form-submit-icon-size, 16px);
}

.the7-search-form .the7-search-form__submit {
  justify-content: center;
  align-items: center;
  align-self: center;
  order: var(--button-order, 2);
  margin: var(--search-icon-margin);
  width: 40px;
  height: 40px;
  min-width: 1em;
  min-height: 1em;
  transition: all 0.3s;
  font-size: var(--e-search-form-submit-icon-size, 16px);
  border-width: var(--the7-top-btn-border-width, 0px) var(--the7-right-btn-border-width, 0px) var(--the7-bottom-btn-border-width, 0px) var(--the7-left-btn-border-width, 0px);
  border-style: var(--the7-btn-border-style, none);
  border-radius: 100%;
  background-color: var(--the7-accent-color);
  color: var(--the7-secondary-text-color);
  background: #FFFFFF00;

  &:hover {
    color: var(--the7-accent-color);
  }
}

.the7-search-form-toggle {
  position: absolute;
  left: var(--left-toggle);
  right: var(--right-toggle);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--toggle-width, 40px);
  min-height: var(--toggle-height, 40px);
  font-size: 16px;
  color: var(--the7-secondary-text-color);
  background: #FFFFFF00;
  border-radius: 100%;
  transition: all 0.3s;

  &:hover {
    color: var(--the7-accent-color);
  }

  & > :nth-child(1) {
    opacity: 1;
  }

  & > :nth-child(2) {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}

.show-input .the7-search-form-toggle:not(:hover) {
  color: var(--the7-secondary-text-color);
}

.show-input .the7-search-form-toggle {
  & > :nth-child(1) {
    opacity: 0;
  }

  & > :nth-child(2) {
    opacity: 1;
  }
}
