@include block ('aside') {

  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: s(2);
  position: fixed;
  top: 0;
  width: $aside-width;

  @include media ('<=desktop-small') {
    width: 30%;
  }

  @include media ('<=tablet-large') {
    display: none;
  }

  &::after {
    $transparency: rgba($color-body-background, 0);
    $fill: rgba($color-body-background, 1);
    background-image: linear-gradient(to right, $transparency 0%, $fill 100%);
    bottom: 0;
    content: '';
    display: block;
    pointer-events: none;
    position: fixed;
    right: 100 - $aside-width;
    top: 0;
    transition: width $ease-aside;
    width: 50px;
    z-index: 1;

    @include media ('<=desktop-small') {
      right: 70%;
    }
  }

  &:hover {
    &::after {
      width: 20px;
    }

    .aside-menu {
      opacity: 1;
    }

    .aside-menu__title--big::after {
      width: 50%;
    }

    .hr {
      opacity: 1;
      width: 50%;
    }

    @include element ('contents') {
      transform: translate(0, 0);
    }

    @include element ('headline') {
      opacity: 1;
    }
  }

  @include element ('header') {
    color: inherit;
    margin-bottom: s(3);
    overflow: visible;
    text-decoration: none;
  }

  @include element ('contents') {
    padding: $aside-top-padding 0 $main-top-padding;
    position: relative;
    transform: translate(40%, 0);
    transition: transform $ease-aside;
  }

  @include element ('logo-image') {
    display: inline-block;
    float: left;
    height: auto;
    line-height: 0;
    margin-right: s(0.5);
    width: 64px;
  }

  @include element ('logo') {
    -webkit-font-smoothing: antialiased;
    color: inherit;
    display: table-cell;
    font-size: em(s(3));
    font-smooth: antialiased;
    font-smooth: greyscale;
    font-smoothing: antialiased;
    font-smoothing: greyscale;
    line-height: 0;
    margin-right: s(0.5);
    text-decoration: none;
    vertical-align: bottom;

    &::before {
      margin: 0;
    }
  }

  @include element ('headline') {
    display: table-cell;
    opacity: 0;
    transition: $ease-aside;
    vertical-align: bottom;
    white-space: nowrap;
  }

  @include element ('title') {
    display: block;
    font-weight: $font-weight-bold;
  }

  @include element ('sub-title') {
    display: block;
  }
}