@import url('~antd/es/style/themes/default.less');
@import url('../style/var.less');

@skeleton-app-prefix-cls: ~'@{style-prefix}-skeleton';

@skeleton-color-gray: #3c4959;
@skeleton-to-color-gray: shade(@skeleton-color-gray, 20%);

.skeleton-color-gray() {
  background: linear-gradient(
    90deg,
    @skeleton-color-gray 25%,
    @skeleton-to-color-gray 37%,
    @skeleton-color-gray 63%
  );
  background-size: 400% 100%;
}

.@{skeleton-app-prefix-cls} {
  height: 100%;
}

.@{skeleton-app-prefix-cls}-header.@{ant-prefix}-layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 @padding-sm;
  line-height: 48px;
  background-color: #1d232b;
}

.@{skeleton-app-prefix-cls}-header-left.@{ant-prefix}-skeleton {
  width: 230px;
}

.@{skeleton-app-prefix-cls}-header-right.@{ant-prefix}-skeleton {
  width: 230px;
}

.@{skeleton-app-prefix-cls}-sider {
  padding: @margin-md @padding-sm;
}

.@{skeleton-app-prefix-cls}-sider-li {
  margin-bottom: @margin-lg;
}

.@{skeleton-app-prefix-cls}-sider-li-1 {
  width: 86%;
}

.@{skeleton-app-prefix-cls}-sider-li-2 {
  width: 76%;
}

.@{skeleton-app-prefix-cls}-ctx-table {
  .@{ant-prefix}-skeleton-paragraph {
    margin-bottom: 0;
  }
}

.@{skeleton-app-prefix-cls}-gray {
  &.@{ant-prefix}-skeleton.@{ant-prefix}-skeleton-active
    .@{ant-prefix}-skeleton-avatar {
    .skeleton-color-gray();
  }

  &.@{ant-prefix}-skeleton.@{ant-prefix}-skeleton-active
    .@{ant-prefix}-skeleton-content
    .@{ant-prefix}-skeleton-paragraph
    > li {
    .skeleton-color-gray();
  }
}