.wp-block-search {
  max-width: var(--responsive--aligndefault-width);

  &__button-only.aligncenter {

    .wp-block-search__inside-wrapper {
      justify-content: center;
    }
  }

  &.wp-block-search__button-inside,
  &.wp-block-search__button-outside,
  &.wp-block-search__no-button {


    .wp-block-search__label {
      font-size: var(--form--font-size);
      font-weight: var(--form--label-weight);
      margin-bottom: calc(var(--global--spacing-vertical) / 3);
    }

    .wp-block-search__inside-wrapper {
      position: relative;
      padding: 0;


      .wp-block-search__input {
        border-width: var(--form--border-width);
        border-style: solid;
        border-color: var(--form--border-color);
        color: var(--global--color-text-lighten);
        line-height: var(--form--line-height);
        max-width: inherit;

        padding: var(--form--spacing-unit-vertical) var(--form--spacing-unit-horizontal);

        &:focus {
          color: var(--form--color-text);
          border-color: var(--form--border-color);
          outline: none;
        }

        .has-background &,
        [class*="background-color"] &,
        [style*="background-color"] &,
        .wp-block-cover[style*="background-image"] & {
          border-color: currentColor;
        }

        .has-background.has-gray-background-color &,
        .has-background.has-dark-gray-background-color &,
        .has-background.has-black-background-color & {
          border-color: var(--global--color-invert);
        }
      }

      button.wp-block-search__button {
        @include button-style();
        border: none;
        overflow: hidden;

        &:focus {
          outline: none;
          background: var(--button--color-background-focus);
        }

        &:hover {
          color: var(--button--color-text-hover);
          background: transparent;
          border: 1px solid var(--button--color-background);

        }

        &.has-icon {
          border: none;
          padding: 1px 10px;
          width: 60px;
          height: 44px;
          background: none;


          svg {
            width: 40px;
            height: 40px;
            fill: var(--form--icon-color);
          }


        }

        .has-background.has-gray-background-color &,
        .has-background.has-dark-gray-background-color &,
        .has-background.has-black-background-color & {
          color: var(--global--color-invert);
          border-color: currentColor;

          &:hover {
            background-color: var(--button--color-background);
            border-color: var(--global--color-invert);
            color: var(--global--color-invert);

            .is-dark-theme & {
              color: var(--button--color-text);
            }
          }
        }

        .has-background.has-white-background-color &,
        .has-background.has-green-background-color &,
        .has-background.has-blue-background-color &,
        .has-background.has-purple-background-color &,
        .has-background.has-red-background-color &,
        .has-background.has-orange-background-color &,
        .has-background.has-yellow-background-color & {
          border-color: currentColor;
          color: currentColor;

          &:hover {
            background-color: var(--form--border-color);
            border-color: var(--form--border-color);
            color: var(--global--color-invert);

            .is-dark-theme & {
              border-color: var(--button--color-text);
              background-color: var(--button--color-text);
              color: var(--button--color-background);
            }
          }
        }
      }
    }
  }

  // Button Inside

  &.wp-block-search__button-inside {

    .wp-block-search__inside-wrapper {
      background-color: var(--global--color-invert);
      border: var(--form--border-width) solid var(--form--border-color);
      border-radius: var(--form--border-radius);
      position: relative;


      .wp-block-search__input {
        margin-right: 0;
        padding-right: 60px;

        &:focus {
          outline: 2px dotted var(--form--border-color);
          outline-offset: -5px;

          .is-dark-theme & {
            outline-color: currentColor;
          }
        }
      }

      .wp-block-search__button {
        margin-left: 0;

        &.has-icon {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
        }

      }
    }


    button.wp-block-search__button {

      .has-background.has-gray-background-color &,
      .has-background.has-dark-gray-background-color &,
      .has-background.has-black-background-color & {
        border-color: var(--button--color-background);
        color: var(--button--color-background);

        &:hover {
          color: var(--global--color-invert);
        }

        .is-dark-theme & {
          border-color: var(--button--color-text);
          color: var(--button--color-text);

          &:hover {
            color: var(--global--color-invert);
          }
        }
      }

      .is-dark-theme & {
        border-color: var(--button--color-text);
        color: var(--button--color-text);

        &:hover {
          border-color: var(--button--color-text);
          background-color: var(--button--color-text);
          color: var(--button--color-background);
        }
      }
    }
  }

  // Button outside

  &.wp-block-search__button-outside {

    .wp-block-search__inside-wrapper {

      button.wp-block-search__button {

        &.has-icon {
          background-color: var(--button--color-background);
          color: var(--button--color-text);

          svg {
            fill: var(--button--color-text);
          }

          &:hover {
            color: var(--button--color-text-hover);
            background: transparent;
            border: 1px solid var(--button--color-background);

            svg {
              fill: var(--button--color-text-hover);
            }

          }
        }


      }
    }


  }

}

.wp-block-search__button {
  box-shadow: none;
}