@import "../../style/themes/default";
@import "../../style/mixins/index";

@modal-layout-prefix-cls: ~"@{mkui-prefix}-modal-layout";
@modal-tabs-prefix-cls: ~"@{mkui-prefix}-modal-tabs";
@modal-result-prefix-cls: ~"@{mkui-prefix}-modal-result";
.@{modal-layout-prefix-cls} {
  .mkui-modal-close-x {
    width: 50px;
    height: 50px;
  }
  .mkui-modal-header {
    .mkui-input-search {
      margin-top: 20px;
    }
  }
  .@{modal-tabs-prefix-cls} {
    overflow-x: hidden;
    &.with-result {
      width: 48.5%;
    }
    &-tab-names {
      position: relative;
      margin-bottom: 10px;
      border-bottom: 3px solid #efefef;
      padding-bottom: 3px;
      .tab {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        &.active,&:hover {
          color: #000;
        }
      }
    }
    &-tab-line-bar {
      transition: all 0.4s;
      position: absolute;
      height: 3px;
      background: @primary-color;
      bottom: -3px;
    }
    &-tab-contents {
      transition: margin-left 0.4s;
      display: flex;
    }
    &-pane {
      flex: auto;
      width: 100%;
    }
  }

  .@{modal-result-prefix-cls} {
    width: 48.5%;
    &-title {
      position: relative;
      margin-bottom: 10px;
      border-bottom: 3px solid #efefef;
      padding-bottom: 3px;
      .clear-all {
        color: @btn-text-color;
        cursor: pointer;
        float: right;
        font-weight: 300;
      }
    }
  }
}