:root :where(.wp-block-search) {
    &.is-style-header-search:not(.wp-block) {
        @media (width <= 1199px) {
            display: none;
        }
    }

    &.is-style-mobile-header-search {
        @media (width >= 1200px) {
            &:not(.wp-block) {
                display: none;
            }
        }

        .wp-block-search__input {
            position: absolute;
            padding-inline: 16px;
            border-color: var(--wp--preset--color--black);
            border-radius: 4px;
            inset-inline: 0;
            top: calc(100% + 30px);
            z-index: 1;
            width: 100%;
            box-sizing: border-box;

            &:focus-visible {
                outline: none;
            }
        }

        &.wp-block-search__button-only .wp-block-search__button {
            padding: 0;
            align-items: center;
        }
    }

    
}

@media(min-width:1400px) {
    .is-style-header-search.wp-block-search {
        width: 600px !important;
    }

    .header-v2 .is-style-header-search.wp-block-search {
        width: 701px !important;
    }
}

.header-v1 .is-style-header-search.wp-block-search {
    width: 400px;
}

.header-v2 .is-style-header-search.wp-block-search {
    width: 50%;
}

@media(min-width:1200px) {
    .header-v3 .is-style-header-search.wp-block-search {
        width: 600px !important;
    }
}

.header-v1 {
    .is-style-mobile-header-search .wp-block-search__button::before {
        color: var(--wp--preset--color--white);

    }
}

.header-v2, .header-v3 {
    .is-style-mobile-header-search .wp-block-search__button::before {
        color: var(--wp--preset--color--black);

    }
}

.header-v2 {
    .wp-block-search.is-style-header-search .wp-block-search__inside-wrapper{
        background-color:var(--wp--preset--color--light-gray) !important;
        .wp-block-search__button {
            background-color:var(--wp--preset--color--primary) !important;
        }
    }
}

.header-v3 {
    .wp-block-search.is-style-header-search .wp-block-search__inside-wrapper{
        background-color:var(--wp--preset--color--light-gray) !important;
        .wp-block-search__button {
            background-color:var(--wp--preset--color--electric-purple) !important;
        }
    }
}
:root :where(.blog-archive), .single-post {

  .wp-block-search__inside-wrapper {
    background-color: var(--wp--preset--color--white);
    border-radius: 4px;
    padding: 4px 4px 4px 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;

    .wp-block-search__input {
      background-color: transparent;
      border: none;
      padding: 0;
      flex: 1;
      font-size: 14px;
    }

    .wp-block-search__button {
      background-color: #ffffff !important;
      border-radius: 3px;
      padding: 8px 9px;
      margin: 0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;

      .search-icon {
        fill: #333;
        width: 20px;
        height: 20px;
      }
    }
  }
}