@mixin default-index-alignment {
  max-width: 25%;
  text-align: right;
}

.__component_index {
  @include single-box-shadow(#111, 0, -0.5em, 5em, 1em, inset);
  @include default-side-padding;
  background: $hard_contrast_area asset-url('styleus/themes/base/noise_dark.png', image);
  padding-top: 2em;
  padding-bottom: 2em;

  h3 {
    @include default-index-alignment;
    font-family: 'Calluna-Regular';
    color: #bb9b1d;
    font-size: 1.2em;
    letter-spacing: 0.12em;
    font-weight: thin;
    text-transform: capitalize;
    margin-bottom: 0.5em;
    border-bottom: 1px dashed #bb9b1d;
  }

  ul {
    @include default-index-alignment;

    li {
      text-align: right;
      margin-bottom: 0.3em;

      a:link, a:visited, a:hover, a:active {
        font-family: 'Calluna-Regular';
        letter-spacing: 0.12em;
        color: #ccc;
        text-decoration: none;
        position: relative;
        top: 0; left: 0;

        &:hover:after {
          content: '';
          display: block;
          width: 9999px;
          height: 0.8em;
          position: absolute;
          right: -9999px - 5;
          top: 0;
          border-bottom: 1px dashed #bb9b1d;
        }
      }
    }
  }
}