.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  .list-index {
    ul {
      color: @themeColor;
    }
    .list-index-skip-placeholder {
      &:after {
        content: '';
        width: 6px;
        height: 6px;
        margin-left: -3px;
        margin-top: -3px;
        background: @themeColor;
      }
    }
    .list-index-label {
      margin-bottom: -22px;
      margin-right: 15px;
      width: 44px;
      height: 44px;
      line-height: 44px;
      border-radius: 50%;
      background: @themeColor;
      font-size: 17px;
      &:before {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50% 0% 50% 50%;
        content: '';
        background-color: inherit;
        left: 0;
        top: 0;
        transform: rotate(45deg);
        z-index: -1;
      }
    }
  }
  .navbar ~ .page > .list-index,
  .navbar ~ .list-index {
    top: @navbarSize;
  }
  .toolbar ~ .page > .list-index,
  .toolbar ~ * .page > .list-index,
  .toolbar ~ .list-index {
    bottom: @toolbarSize;
  }
  .tabbar-labels ~ .page > .list-index,
  .tabbar-labels ~ * .page > .list-index,
  .tabbar-labels ~ .list-index {
    bottom: @tabbarLabelsSize;
    @media (min-width: 768px) {
      bottom: @tabbarLabelsSizeTablet;
    }
  }

  .safe-areas({
    .toolbar ~ .page > .list-index,
    .toolbar ~ * .page > .list-index,
    .toolbar ~ .list-index {
      bottom: ~"calc(@{toolbarSize} + constant(safe-area-inset-bottom))";
      bottom: ~"calc(@{toolbarSize} + env(safe-area-inset-bottom))";
    }
    .tabbar-labels ~ .page > .list-index,
    .tabbar-labels ~ * .page > .list-index,
    .tabbar-labels ~ .list-index {
      bottom: ~"calc(@{tabbarLabelsSize} + constant(safe-area-inset-bottom))";
      bottom: ~"calc(@{tabbarLabelsSize} + env(safe-area-inset-bottom))";
      @media (min-width: 768px) {
        bottom: ~"calc(@{tabbarLabelsSizeTablet} + constant(safe-area-inset-bottom))";
        bottom: ~"calc(@{tabbarLabelsSizeTablet} + env(safe-area-inset-bottom))";
      }
    }
  });

  .color-theme-loop({
    .color-theme-@{colorThemeName} .list-index,
    .list-index.color-theme-@{colorThemeName} {
      ul {
        color: @colorThemeValue;
      }
      .list-index-skip-placeholder:after,
      .list-index-label {
        background-color: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .list-index.color-@{colorName} {
      ul {
        color: @colorValue;
      }
      .list-index-skip-placeholder:after,
      .list-index-label {
        background-color: @colorValue;
      }
    }
  });
}
