/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';

@grid-custom-prefix-cls: ~'@{css-prefix}grid-custom';
@grid-prefix-cls: ~'@{css-prefix}grid';
@grid-radio-prefix-cls: ~'@{css-prefix}grid-radio';
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{grid-custom-prefix-cls} {
  width: 100%;

  .tiny-modal__header {
    margin-bottom: 16px;
  }

  & &__tabs {
    .@{css-prefix}tabs__content {
      margin: 0;
    }
    .@{grid-custom-prefix-cls}__tabs-body {
      overflow-y: auto;
      border: 0;
      padding: 16px 0;

      .tabs-body-item {
        .@{grid-custom-prefix-cls}__alert {
          margin: 0;
        }

        .@{grid-custom-prefix-cls}__setting {
          border-bottom: 1px solid transparent;
          padding: 8px 0 0;

          .setting-item {
            font-size: var(--tv-Grid-font-size);
            padding: 8px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .setting-icon {
              font-size: 0; // 解决inline-block间隙问题
              .icon {
                display: inline-block;

                &:not(:last-child) {
                  margin-right: 12px;
                }
              }

              .@{svg-prefix-cls} {
                font-size: var(--tv-Grid-icon-size);
                fill: var(--tv-Grid-icon-color);
                cursor: pointer;

                &:hover {
                  fill: var(--tv-Grid-icon-color-hover);
                }

                &.open,
                &.lock,
                &.sort {
                  fill: var(--tv-Grid-icon-color);

                  &:hover {
                    fill: var(--tv-Grid-icon-color-hover);
                  }
                }

                &.is-visible {
                  visibility: hidden;
                  pointer-events: none;
                }
              }
            }
          }

          &.other-setting {
            display: flex;
            flex-direction: column;

            .setting-item {
              span.label {
                display: inline-block;
                text-align: right;
                padding-right: 24px;
              }

              span.selection {
                flex: 1;
                display: inline-block;

                .@{grid-radio-prefix-cls} {
                  margin-right: 10px;
                  margin-left: 0 !important;
                }

                .@{grid-radio-prefix-cls}__label {
                  height: 16px;
                  line-height: 18px;
                }
              }
            }
          }
        }
      }
    }

    .@{grid-prefix-cls}__body-wrapper {
      max-height: 45vh;
      border-bottom: 0;
    }
  }

  & &__footer {
    margin-bottom: 32px;
    text-align: center;
    display: flex;
    justify-content: flex-end;
  }
}
