$torrent--primary--foreground: saturate(darken(#8899a8, 20%), 10%);
$torrent--primary--foreground--error: #e95779;
$torrent--primary--foreground--error--stopped: rgba($torrent--primary--foreground--error, 0.6);
$torrent--primary--foreground--error--stopped--selected: rgba($white, 0.6);
$torrent--primary--foreground--stopped: rgba(#8899a8, 0.8);
$torrent--primary--foreground--selected: $white;
$torrent--primary--foreground--selected--stopped: rgba($torrent--primary--foreground--selected, 0.6);
$torrent--primary--foreground--selected--error: $white;

$torrent--secondary--foreground: #8899a8;
$torrent--secondary--foreground--stopped: #c3ccd3;
$torrent--secondary--foreground--selected: $white;
$torrent--secondary--foreground--selected--stopped: rgba($white, 0.6);

$torrent--tertiary--foreground: #8899a8;
$torrent--tertiary--foreground--stopped: #c3ccd3;
$torrent--tertiary--foreground--selected: rgba($white, 0.9);
$torrent--tertiary--foreground--selected--stopped: rgba($white, 0.5);

$torrent--background--hover: #f6f8fa;
$torrent--background--selected: $blue;
$torrent--background--error: #e95779;

$torrent--border: #e9eef2;
$torrent--border--selected: darken($torrent--background--selected, 3%);
$torrent--border--selected--error: darken($torrent--background--error, 3%);

$torrent--speed--foreground--selected--has-error: $white;
$torrent--speed--foreground--selected: $white;

$torrent--tags--background: #dce2e6;
$torrent--tags--foreground: #6f7d87;
$torrent--tags--background--selected: #4ea3ea;
$torrent--tags--background--selected--has-error: #ed7994;
$torrent--tags--foreground--selected: $white;
$torrent--tags--foreground--has-error: #fbe8ec;

$more-info--background: $white;
$more-info--background--hover: $white;

$more-info--box-shadow--hue: #1a2f3d;
$more-info--border: $textbox-repeater--button--border;

.torrent {
  cursor: default;
  position: relative;

  &:after {
    background: transparent;
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  &:hover {

    &:after {
      background: $torrent--background--hover;
    }

    .torrent {

      &__more-info {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }
    }
  }

  &__detail {
    color: $torrent--secondary--foreground;

    &--name {
      color: $torrent--primary--foreground;
      font-weight: 500;
    }

    &--tags {

      .torrent {

        &__tag {
          display: inline-block;
          margin-right: $spacing-unit * 3/10;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .tag {
        background: $torrent--tags--background;
        color: $torrent--tags--foreground;
      }
    }

    &__icon {

      &--checkmark {

        &.icon {
          opacity: 1;
        }
      }
    }

    .icon {
      fill: currentColor;
      height: 12px;
      margin-right: 5px;
      width: 12px;
    }
  }

  &__details {

    &__section {

      &--secondary {
        color: $torrent--secondary--foreground;
      }

      &--tertiary {
        color: $torrent--tertiary--foreground;
      }
    }
  }

  &--is-stopped {

    .torrent {

      &__details {

        &__section {

          &--secondary {
            color: $torrent--secondary--foreground--stopped;
          }

          &--tertiary {
            color: $torrent--tertiary--foreground--stopped;
          }
        }
      }

      &__detail {
        color: $torrent--secondary--foreground--stopped;

        &--name {
          color: $torrent--primary--foreground--stopped;
          font-weight: 400;
        }

        &--tags {
          opacity: 0.5;
        }
      }
    }
  }

  &--has-error {

    &.torrent {

      &--is-stopped {

        .torrent {

          &__detail {

            &--name {
              color: $torrent--primary--foreground--error--stopped;
            }
          }
        }
      }
    }

    .torrent {

      &__detail {

        &--name {
          color: $torrent--primary--foreground--error;
        }
      }
    }

    &:after {
      background: $torrent--background--error;
    }
  }

  &--is-downloading {

    &--actively {

      .torrent {

        &__detail {

          &--downRate {
            color: $green;
            font-weight: 500;
          }
        }
      }

      .torrent-details {

        &__sub-heading {

          &__tertiary {

            &--download {
              color: $blue;

              .icon {
                fill: $blue;
              }
            }
          }
        }
      }
    }
  }

  &--is-uploading {

    &--actively {

      .torrent {

        &__detail {

          &--upRate {
            color: $blue;
            font-weight: 500;
          }
        }
      }

      .torrent-details {

        &__sub-heading {

          &__tertiary {

            &--upload {
              color: $green;

              .icon {
                fill: $green;
              }
            }
          }
        }
      }
    }
  }

  &--is-selected {

    &.torrent {

      &--has-error {

        .torrent {

          &__detail {

            &--name {
              color: $torrent--primary--foreground--selected--error;
            }

            &--tags {

              .tag {
                background: $torrent--tags--background--selected--has-error;
                color: $torrent--tags--foreground--has-error;
              }
            }

            &--downRate,
            &--upRate {
              color: $torrent--speed--foreground--selected--has-error;
            }
          }
        }

        &,
        &:hover {

          &:after {
            background: $torrent--background--error;
          }
        }
      }

      &--is-stopped {

        &.torrent {

          &--has-error {

            .torrent {

              &__detail {

                &--name {
                  color: $torrent--primary--foreground--error--stopped--selected;
                }
              }
            }
          }
        }

        .torrent {

          &__detail {
            color: $torrent--secondary--foreground--selected--stopped;

            &--name {
              color: $torrent--primary--foreground--selected--stopped;
            }

            &--downRate,
            &--upRate {
              color: $torrent--tertiary--foreground--selected--stopped;
            }

            &--tags {
              opacity: 0.6;
            }
          }

          &__details {

            &__section {

              &--secondary {
                color: $torrent--secondary--foreground--selected--stopped;
              }

              &--tertiary {
                color: $torrent--tertiary--foreground--selected--stopped;
              }
            }
          }
        }
      }
    }

    &,
    &:hover {

      &:after {
        background: $torrent--background--selected;
        opacity: 1;
      }
    }

    .torrent {

      &__detail {
        color: $torrent--secondary--foreground--selected;

        &--name {
          color: $torrent--primary--foreground--selected;
        }

        &--downRate,
        &--upRate {
          color: $torrent--speed--foreground--selected;
        }

        &--tags {

          .tag {
            background: $torrent--tags--background--selected;
            color: $torrent--tags--foreground--selected;
          }
        }
      }

      &__details {

        &__section {

          &--secondary {
            color: $torrent--secondary--foreground--selected;
          }

          &--tertiary {
            color: $torrent--tertiary--foreground--selected;
          }
        }
      }
    }
  }

  &--is-expanded {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 20px;
    height: 70px;

    &.torrent {

      &--is-downloading {

        &--actively {

          .torrent {

            &__detail {

              &--eta {
                margin-right: 10px;
                opacity: 1;
                width: auto;
              }
            }
          }
        }
      }
    }

    .torrent {

      &__details {

        &__section {
          display: flex;

          &--tertiary,
          &--quaternary {
            margin-left: -2px;
          }

          &--primary {
            flex: 1 1 auto;
          }

          &--tertiary {
            font-size: 0.7em;
          }

          &--secondary {
            flex: 0 0 auto;
            font-size: 0.75em;
            font-weight: 500;

            .icon {
              height: 12px;
              width: 12px;
            }

            .torrent {

              &__detail {
                width: auto;
              }
            }
          }

          &__wrapper {
            align-items: center;
            display: flex;
          }
        }
      }

      &__detail {
        flex: 0 0 auto;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;

        &:last-child {
          margin-right: 0;
        }

        &--name {
          flex: 1 1 auto;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &--eta {
          margin-right: 0;
          opacity: 0;
          transition: opacity 1s;
          width: 0;
        }

        &--percentComplete {
          width: 90px;
        }

        &--upTotal {
          width: 55px;
        }

        &--sizeBytes,
        &--freeDiskSpace {
          width: 55px;
        }

        &--added,
        &--creationDate {
          width: 80px;
        }

        &--isPrivate {
          width: 25px;
        }

        &--peers {
          width: 70px;
        }

        &--ratio {
          width: 50px;
        }

        &--seeds {
          width: 70px;
        }

        &--tags {

          &:last-child {
            margin-left: auto;
            width: auto;
          }

          .torrent {

            &__tags {
              margin-right: 0;
            }

            &__tag {

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        .icon {
          display: inline-block;
          height: 10px;
          margin-bottom: -1px;
          margin-right: 3px;
          opacity: 0.3;
          width: 10px;
          vertical-align: baseline;
        }
      }
    }
  }

  &--is-condensed {
    align-items: center;
    border-top: 1px solid $torrent--border;
    display: flex;
    height: 30px;
    padding: 0;

    &:nth-child(0n + 2) {
      border-top: none;
    }

    &.torrent {

      &--is-stopped {

        .torrent {

          &__detail {
            color: $torrent--secondary--foreground--stopped;
          }
        }
      }

      &--is-selected {

        &,
        & + .torrent {
          border-color: $torrent--border--selected;
        }

        &.torrent {

          &--has-error {

            &,
            & + .torrent {
              border-color: $torrent--border--selected--error;
            }
          }

          &--is-stopped {

            .torrent {

              &__detail {
                color: $torrent--tertiary--foreground--selected--stopped;
              }
            }
          }
        }

        .torrent {

          &__detail {
            color: $torrent--secondary--foreground--selected;
          }
        }
      }
    }

    .torrent {

      &__detail {
        flex: 0 0 auto;
        font-size: 0.8em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;

        &--name {
          font-size: 0.9em;
        }

        &--percentComplete {

          .icon {
            opacity: 1;
          }
        }
      }
    }

    .progress-bar {

      &__icon {

        .icon {
          margin-right: 0;
        }
      }
    }
  }

  &__more-info {
    background: $more-info--background;
    border-radius: 32px 0 0 32px;
    box-shadow:
      0 0 30px rgba($more-info--box-shadow--hue, 0.11),
      0 0 0 1px rgba($more-info--box-shadow--hue, 0.07);
    height: 32px;
    margin-top: -16px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    right: -5px;
    top: 50%;
    transform: translateX(15px);
    transition: background 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
    width: 32px;
    z-index: 1;

    .icon {
      fill: rgba($foreground, 0.5);
      position: absolute;
      height: 16px;
      left: 16px;
      width: 16px;
    }

    &:hover {
      background: $more-info--background--hover;
      box-shadow:
        0 0 30px rgba($more-info--box-shadow--hue, 0.2),
        0 0 0 1px rgba($more-info--box-shadow--hue, 0.1);

      .icon {
        fill: $blue;
      }
    }
  }
}
