@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-indexes-color: $ink-color-text !default;
$ink-indexes-font-size: $ink-font-size-md !default;
$ink-indexes-line-height: $ink-line-height-md !default;
$ink-indexes-nav-color: $ink-color-brand !default;
$ink-indexes-nav-font-size: $ink-font-size-sm !default;
$ink-indexes-nav-line-height: $ink-line-height-sm !default;
$ink-indexes-nav-zindex: 2 !default;
$ink-indexes-nav-index-v-spacing: $ink-spacing-base !default;
$ink-indexes-list-spacing: $ink-spacing-md !default;
$ink-indexes-list-title-padding-bottom: $ink-spacing-xs !default;

.ink-indexes {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: $ink-indexes-color;
  font-size: $ink-indexes-font-size;
  line-height: $ink-indexes-line-height;

  &__nav {
    position: fixed;
    top: 50%;
    right: 0;
    overflow: hidden;
    transform: translate3d(0, -50%, 0);
    color: $ink-indexes-nav-color;
    font-size: $ink-indexes-nav-font-size;
    line-height: $ink-indexes-nav-line-height;
    z-index: $ink-indexes-nav-zindex;
  }

  &__index {
    padding: 2px $ink-indexes-nav-index-v-spacing;
    text-align: center;
  }

  &__body {
    width: 100%;
    height: 100%;
  }

  &__list {
    width: 100%;
    padding: 0 $ink-indexes-list-spacing;

    &-title {
      @include hairline-bottom;
      width: 100%;
      padding-bottom: $ink-indexes-list-title-padding-bottom;
    }
  }
}