.download {
  margin-bottom: 2.5rem;
  display: flex;
  
  &__link {
    width: 100%;
    display: flex;
    overflow: hidden;
    background-color: $gray-100;
    transition: all .3s ease;
    .dark & {
      background: $dark;
      color: $white;
    }
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
      .download__title {
        color: $accent;
        background-size: 100% 1px;
      }
      .download__icon {
        color: $accent;
      }
    }
  }

    &__text {
      flex-grow: 1;
      padding: 1.5em;
      p {
        font-size: 14px;
        margin: 0;
        color: $black;
      }
    }

      &__title {
        display: inline-block;
        background-image: linear-gradient($accent,$accent);
        background-size: 0% 1px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background .3s ease;
      }
    
    &__icon {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $primary;
      color: $white;
      width: 100px;
      transition: color .15s ease;

    }

  &--image {
    .download__container {
      width: 100%;
      position: relative;
      .download__image {
        width: 100%;
        img {
          max-width: 100%;
        }
      }
      .download__link {
        background-color: $gray-100;
        display: flex;
        width: 64%;
        position: absolute;
        right: 8%;
        bottom: -16%;
        .dark & {
          background: $dark;
        }

      }
    }
  }

  &--error {
    .hint__icon {
      background-color: $warning;
      color: $gray-100;
      .icon-exclamation-square {
        display: block;
      }
    }
    .hint__text {
      color: $warning;
    }
  }
}

.download-list {
  > li {
    padding: 0!important;
    clear: both;
    line-height: 50px;

  }
  .download {
    &__item {
        width: 100%;
        display: inline-block;
        transition: all .3s ease;
        &:hover {
          .download__title {
            color: $accent;
            background-size: 100% 1px;
          }
          .download__icon {
            color: $accent;
          }
        }
    }
      &__title {
        line-height: 1;
        color: $black;
        .dark & {
            color: $white;
        }
      }
      &__icon {
        float: right;
        background-color: $primary;
        color: $white;
        width: 50px;
        height: 50px;
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .15s ease;
      }
      &__size {
        position: absolute;
        right: 100px;
        color: $gray-500;
        font-weight: 300;
        .dark & {
            color: $light;
        }
      }
        
  }
}