@import 'variables.less';

:global {
  body {
    font-family: @font-family;
  }

  .code {
    display: block;
    padding: 12px;
    border: 1px solid @light-color04;
    background-color: @light-color01;
  }

  .hover-show {
    visibility: hidden;
  }

  .item-name {
    display: flex;
    color: @text-color;
    font-family: @font-family-id;
    font-size: @body-size;
    font-weight: 600;

    .icon {
      margin-right: 8px;
      align-self: center;
    }

    &:hover {
      strong {
        color: @primary;
      }
    }
  }

  .hidden-input {
    position: absolute;
    width: 0;
    opacity: 0;
  }

  .header-shadow {
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06) !important;
  }

  .apps-dark-header {
    background-color: @dark-color08 !important;
  }

  .loading {
    margin-top: 100px;
    text-align: center;
  }

  .custom-icon {
    svg {
      width: 16px;
      height: 16px;
      color: @icon-color;
      fill: #b6c2cd;
    }

    &:hover {
      svg {
        color: #1890ff;
        fill: #6fb4f5;
      }
    }
  }

  .sl-page {
    &-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }

    &-body {
      background-color: @body-bg-color;
    }

    &-side {
      position: fixed;
      top: 88px;
      width: @nav-width;
      padding: 0 20px 40px 20px;
      z-index: 2;

      @media (max-width: 1366px) {
        width: @narrow-nav-width;
      }

      &-title {
        position: relative;
        padding: 24px 8px;

        .icon {
          margin-right: 12px;
        }

        .h3 {
          display: inline-block;
          vertical-align: middle;
          font-size: 23px;
          line-height: 1.33;
          text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
        }
      }

      &-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        border-style: solid;
        border-width: 1px 0 0 0;
        border-image-source: radial-gradient(
          circle at 50% 50%,
          #e3e9ef,
          rgba(216, 216, 216, 0)
        );
        border-image-slice: 1;
      }
    }

    &-nav {
      width: auto;
      padding: 0 12px 0 0;
      margin-right: -12px;
      z-index: 1;
      height: calc(100vh - 188px);
      overflow-y: auto;
    }

    &-main {
      overflow-y: auto;
      overflow-x: hidden;
      margin-left: @nav-width - 20px;
      padding: 20px;

      @media (max-width: 1366px) {
        margin-left: @narrow-nav-width - 20px;
      }
    }
  }

  [data-tooltip]:hover {
    &::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: -26px;
      display: inline-block;
      padding: 3px 6px;
      border-radius: 2px;
      background: #000;
      color: #fff;
      white-space: nowrap;
      z-index: 100;
    }
  }

  .sl-table {
    .ant-table-thead > tr > th {
      background: rgba(0, 104, 255, 0.02);
    }
    .ant-table-thead th.ant-table-column-has-sorters:hover {
      background: rgba(0, 104, 255, 0.1);
    }
    .ant-table-tbody > tr.ant-table-row:hover > td {
      background: #f2f7ff;
    }
    .ant-table-tbody > tr.ant-table-row-selected > td {
      background: #f2f7ff;
    }
    td.ant-table-column-sort {
      background: inherit;
    }
    .ant-table-column-sorters {
      padding: 16px 0;
    }
    .ant-table-footer {
      padding: 8px 16px;
    }
  }

  .tip{
    color: @color-text-body;
  }

  .linkClass{
    color:@blue-1;
    cursor: pointer;
    -moz-user-select:none; /*Firefox*/
    -webkit-user-select:none; /*Webkit*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*Early browsers*/
    user-select:none;
  }
}
