/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-search-theme() {

  el-search-field {
    .close-button {
      z-index: 1;
    }

    .search {
      background: el-theme(search-background-color);

      span.info {
        color: el-theme(search-info-text-color);
        font-family: el-theme(search-info-text-font-family);
        font-size: el-theme(search-info-text-font-size);
        font-weight: el-theme(search-info-text-font-weight);
        line-height: el-theme(search-info-text-line-height);
      }

      input {
        border-bottom: el-theme(search-divider-width) el-theme(search-divider-style) el-theme(search-divider-color);
        color: el-theme(search-text-color);
        font-family: el-theme(search-text-font-family);
        font-size: el-theme(search-text-font-size);
        font-weight: el-theme(search-text-font-weight);
        line-height: el-theme(search-text-line-height);

        &::placeholder {
          color: el-theme(search-placeholder-text-color);
        }

        &::-ms-clear {
          display: none;
        }
      }
    }

    &.rotate-layout {
      opacity: 0;
      background: el-theme(search-background-color);
    }

    &.modal-zoomin {
      .search::before,
      .search::after {
        border: 1.5rem solid el-theme(search-extra-background-color);
      }

    }

    &.modal-half {
      .form-wrapper {
        background: el-theme(search-background-color);
      }
      .search::before {
        background: el-theme(search-extra-background-color);
      }
    }

    &.modal-drop {
      .form-content::after {
        background: el-theme(search-divider-color);
      }
      .search::before {
        background: el-theme(search-background-color);
      }
    }

    &.curtain {
      .search::after {
        background: el-theme(search-background-color);
      }
      .search {
        background: el-theme(search-background-color);
      }
    }

    &.column-curtain {
      &::before {
        background: el-theme(search-background-color);
      }
      &::after {
        background: transparent;
      }
      &.show::after {
        background: el-theme(search-extra-background-color);
      }
    }
  }
}