@{component--prefix}-tile-download {
  hr {
    margin-bottom: @default--space / 4;
    width: @default--space * 2;

    .gt-xl({
      margin-bottom: (@default--space / 2) + (@default--space / 4);
      width: @default--space * 5;
    });
  }

  &.bright {
    color: @champagne;

    svg {
      * {
        fill: @champagne !important;
      }
    }

    hr {
      background: @champagne;
    }
  }

  &.dark {
    color: @white;

    svg {
      * {
        fill: @white !important;
      }
    }

    hr {
      background: @white;
    }
  }
}

.tile-download {
  margin-bottom: 16px;
  background-color: @champagne;
  border: 1px solid @champagne;
  cursor: pointer;
  height: @default--space * 4;
  .easeInOutSine(all, @tile-animation-duration);

  .gt-xl({
    height: @default--space * 6;
  });

  .bright & {
    background-color: @white;
    border: 1px solid @champagne;
  }
  
  .text {
    margin-left: @default--space;

    .gt-xl({
      margin-left: @default--space + (@default--space / 2);
    });
  }

  ng-transclude {
    width: 100%;
  }

  .icon {
    color: @white;
    font-size: 0;

    svg {
      fill: @white;
      width: 30/@rem;
      height: 30/@rem;
    }

    .gt-xl({
      svg {
        width: 40/@rem;
        height: 40/@rem;
      }
    });
  }

  // Animation
  &,
  hr,
  svg * {
    .easeInOutSine(all, @tile-animation-duration);
  }

  &:hover {
    background-color: @white;
    color: @champagne;

    hr {
      background: @champagne;
    }

    .icon {
      color: @champagne;

      svg {
        * {
          fill: @champagne !important;
        }
      }
    }
  }
}