@import '../../../style/global-parameters.scss';

$labelWidth: 86px;
$labelMarginRight: 16px;

.oio-default-search {
  padding-bottom: 0;

  .oio-cate-search {
    box-shadow: none;
    margin-bottom: var(--oio-margin-md);
    height: auto;

    &.oio-cate-search-center {
      .ant-tabs-nav-wrap {
        justify-content: center;
      }
    }

    &.oio-cate-search-end {
      .ant-tabs-nav-wrap {
        justify-content: end;
      }
    }
    &.oio-tabs.ant-tabs-top {
      .ant-tabs-tab + .ant-tabs-tab {
        margin-left: 40px;
      }

      .ant-tabs-nav {
        .ant-tabs-tab {
          padding: var(--oio-padding-md) 0;
          font-size: var(--oio-font-size-lg);
        }
      }
    }
    .ant-tabs-content-holder {
      display: none;
    }
    &-second {
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
      margin-bottom: var(--oio-margin-md);
      .secondary-action {
        cursor: pointer;
        padding: 0 var(--oio-padding-md);
        margin-right: var(--oio-margin-md);
        border-radius: var(--oio-border-radius);
        font-size: var(--oio-font-size);
        color: var(--oio-text-color-secondary);
        height: var(--oio-height);
        line-height: var(--oio-height);
        font-weight: 400;
        flex-shrink: 0;
        &:last-child {
          margin-right: 0;
        }

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

        &.active {
          color: var(--oio-selected-text-color);
          background: var(--oio-selected-background-color);
        }
      }
    }
  }

  .ant-form-item-label {
    flex-basis: $labelWidth;
    margin-right: $labelMarginRight;
  }

  .ant-form-item-control {
    max-width: calc(100% - #{$labelWidth} - #{$labelMarginRight});
  }

  &-expand {
    .oio-default-search-action-bar {
      .oinone-xiala {
        transform: rotate(180deg);
      }
    }
  }

  &-fold-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--oio-row-gap);
  }

  .oio-default-search-action-bar {
    display: flex;
    column-gap: 16px;
    justify-content: flex-end;
    align-items: center;
    margin-right: 12px;
    .reset-icon {
      height: auto;
      .oio-icon {
        font-size: 18px;
      }
    }
  }
}

$dialogLabelWidth: 60px;
$dialogLabelMarginRight: 8px;

.default-dialog {
  .ant-modal-body {
    .oio-default-search {
      border: none;
      padding: 0;

      .oio-default-search-action-bar {
        column-gap: 12px;
        margin-right: 0;
      }

      .ant-form-item-label {
        flex-basis: $dialogLabelWidth;
      }
      .ant-form-item-control {
        max-width: calc(100% - #{$dialogLabelWidth} - #{$dialogLabelMarginRight});
      }
      .oio-form {
        .#{$formItemClassPrefix}-horizontal {
          & > .ant-form-item-label {
            flex-basis: $dialogLabelWidth;
          }
          & > .ant-form-item-control {
            max-width: calc(100% - #{$dialogLabelWidth} - #{$dialogLabelMarginRight});
          }
        }
      }
    }
  }
}

.default-drawer {
  .oio-default-search {
    border: none;
    padding: 0;

    .oio-default-search-action-bar {
      column-gap: 12px;
      margin-right: 0;
    }

    .ant-form-item-label {
      flex-basis: $dialogLabelWidth;
    }

    .ant-form-item-control {
      max-width: calc(100% - #{$dialogLabelWidth} - #{$dialogLabelMarginRight});
    }
  }
}