@import '../../styles/mixins/mixins';
@import '../../styles/mixins/utils';
@import '../../styles/common/variables';

@include b(searchbar-dialog) {
  .el-dialog__header {
    padding: 16px 24px;
    border-bottom: $--dialog-border-base;
    .el-dialog__title {
      line-height: 24px;
      font-size: $--dialog-title-font-size;
      color: $--dialog-title-font-color;
    }
  }
  .el-dialog__body {
    padding: 24px;
  }

  .el-dialog__footer {
    padding: 12px;
    border-top: $--dialog-border-base;
  }

  @include b(searchbar-modal-container) {
    @include e(input) {
      width: $--input-width-base;

      .el-input__inner {
        border-radius: $--border-radius-small;
      }
    }
  }

  @include b(searchbar-modal-footer) {
    text-align: center;

    @include e(confirm) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      background-color: $--button-primary-background-color;
      font-size: $--button-font-size;
      border-radius: $--button-border-radius-small;
    }

    @include e(cancel) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      font-size: $--button-font-size;
      border-radius: $--button-border-radius-small;
    }
  }
}

@include b(searchbar-confirm) {
  padding-bottom: 0;
  .el-message-box__header {
    padding: 16px 24px 8px;
    .el-message-box__title {
      line-height: 24px;
      font-size: $--dialog-title-font-size;
      color: $--dialog-title-font-color;
    }
  }
  .el-message-box__content {
    padding: 12px 24px;
    color: transparentize($--color-black, 0.35);
  }

  .el-message-box__btns {
    padding: 12px;
    text-align: center;
  }

  @include b(searchbar-confirm-btns) {
    text-align: center;

    @include e(confirm) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      background-color: $--button-primary-background-color;
      font-size: $--button-font-size;
      border-radius: $--button-border-radius-small;
    }

    @include e(cancel) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      font-size: $--button-font-size;
      border-radius: $--button-border-radius-small;
    }
  }
}