/**
* 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%;

  & &__tabs {
    .@{grid-custom-prefix-cls}__tabs-head {
      white-space: nowrap;
      margin: 0;
      overflow: hidden;
      height: var(--ti-grid-custom-head-height);
      width: 100%;
      position: relative;

      ul {
        height: var(--ti-grid-custom-head-height);
        border-bottom: 1px solid var(--ti-grid-border-color);
        list-style: none;
        box-sizing: border-box;

        li {
          float: left;
          margin-right: -1px;
          cursor: pointer;
          line-height: 28px;
          padding: 0 20px;
          color: var(--ti-grid-text-color);
          min-width: 90px;
          height: var(--ti-grid-custom-head-height);
          line-height: var(--ti-grid-custom-head-height);

          &.@{grid-custom-prefix-cls}__tabs-selected {
            color: var(--ti-grid-primary-color);
            border-bottom: 3px solid var(--ti-grid-primary-color);
            font-weight: 700;
          }
        }
      }
    }

    .@{grid-custom-prefix-cls}__tabs-body {
      overflow-y: auto;
      border: 0;
      padding: 12px 0;

      .tabs-body-item {
        .@{grid-custom-prefix-cls}__alert {
          position: relative;
          border: 1px solid;
          border-radius: var(--ti-grid-border-radius);
          height: var(--ti-grid-custom-body-list-height);
          line-height: var(--ti-grid-custom-body-list-height);
          padding-left: 8px;
          overflow: hidden;
          background: var(--ti-grid-row-hover-background-color);
          border-color: #91d5ff;
          color: var(--ti-grid-text-color);
          display: flex;
          align-items: center;

          .@{svg-prefix-cls} {
            font-size: var(--ti-common-font-size-3);
            fill: var(--ti-grid-primary-color);
          }

          p {
            display: inline-block;
            line-height: 16px;
            padding-left: 8px;
          }
        }

        .@{grid-custom-prefix-cls}__setting {
          border-bottom: 1px solid var(--ti-grid-border-color);
          padding: 12px 0 24px;

          .setting-item {
            font-size: var(--ti-grid-font-size);
            padding: 10px 8px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: flex-start;
            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(--ti-common-font-size-1);
                fill: var(--ti-grid-normal-text-color);
                cursor: pointer;

                &:hover {
                  fill: var(--ti-grid-primary-disabled-text-color);
                }

                &.open,
                &.lock,
                &.sort {
                  fill: var(--ti-grid-primary-color);

                  &:hover {
                    fill: var(--ti-grid-primary-hover-color);
                  }
                }

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

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

            .setting-item {
              span.label {
                width: 26%;
                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: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
