@use 'sass:math';

// 公共样式类
@use './var.scss' as *;
@use '../mixins/mixins' as *;
@use '../mixins/_col' as *;

@use 'element-plus/theme-chalk/src/mixins/function' as elFn;

:root {
  --pd-form-label-width: 124px;
  --pd-form-content-width: 220px;
}

// 使用pagoda前缀，避免影响到全局样式
.pagoda {
  &-el-form-reset {
    .el-form-item {
      &__label {
        width: var(--pd-form-label-width);
      }

      &__content {
        width: var(--pd-form-content-width);
        flex: none;
      }

      @include el-form-item-reset(var(--pd-form-content-width));
    }
  }

  &-el-form-reset-block {
    .el-form-item {
      &__label {
        width: var(--pd-form-label-width);
      }

      &__content {
        width: auto;
        white-space: nowrap;
      }
      @include el-form-item-reset(100%);
    }
  }

  &-clearfix {
    zoom: 1;
    &:before,
    &:after {
      content: '';
      display: block;
      clear: both;
    }
  }

  &-text-success {
    color: elFn.getCssVar('color-success');
  }

  &-text-danger {
    color: elFn.getCssVar('color-danger');
  }

  &-text-warning {
    color: elFn.getCssVar('color-warning');
  }

  &-text-primary {
    color: elFn.getCssVar('color-primary');
  }

  &-text-title {
    color: elFn.getCssVar('text-color-primary');
  }

  &-text-regular {
    color: elFn.getCssVar('text-color-regular');
  }

  &-text-secondary {
    color: elFn.getCssVar('text-color-secondary');
  }

  &-text-placeholder {
    color: elFn.getCssVar('text-color-placeholder');
  }

  // pagoda-link
  &-link {
    color: elFn.getCssVar('color-primary');
    cursor: pointer;
    &:hover {
      color: elFn.getCssVar('color-primary', 'light-3');
    }

    &--underline {
      position: relative;
      color: elFn.getCssVar('text-color-regular');
      cursor: pointer;
      &:hover {
        color: elFn.getCssVar('color-primary');
        &::after {
          border-bottom-color: elFn.getCssVar('color-primary');
        }
      }
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        bottom: 0;
        border-bottom: 1px solid elFn.getCssVar('text-color-secondary');
      }
    }
  }

  // pagoda-form-grid
  &-form-grid {
    font-size: 0;
    margin-left: -5px;
    margin-right: -5px;
    &.pagoda-form-grid--inline {
      margin-left: 0;
      margin-right: 0;
      .pagoda-form-grid-cell {
        padding-left: 0;
        padding-right: 0;
        margin-right: 10px;
      }
    }
    & &-cell {
      padding-left: 5px;
      padding-right: 5px;
      display: inline-block;
      float: none;
      font-size: 14px;
      vertical-align: top;
    }
  }

  // pagination
  &-pagination {
    margin: 16px 0;
    justify-content: right;
  }

  // text-overflow
  &-text-overflow {
    @include text-ellipsis;
  }
}

// el-col 扩展
@include col-size(lgs);

@include col-size(lgm);