@import 'common/sass/variables';
@import 'common/sass/mixins';

.SupportPage {
  padding: 0;
  max-width: 920px;
  margin: 0 auto;

  &-mycrypto {
    text-align: center;

    &-logo {
      display: block;
      margin: 0 auto $space;
      height: 100px;
      background-image: url('~assets/images/logo-mycrypto-transparent.svg');
      background-position: center;
      background-size: auto 100%;
      background-repeat: no-repeat;

      @include theme(dark) {
        background-image: url('~assets/images/logo-mycrypto.svg');
      }
    }

    &-about {
      max-width: 700px;
      margin: 0 auto $space;
    }

    &-social {
      margin-bottom: $space-sm;

      &-link {
        margin: 0 .45rem;
        color: shade-dark(0.4);

        &:hover {
          opacity: 1;
        }

        .sm-icon {
          font-size: 1.3rem;
        }
      }
    }

    &-legal {
      display: flex;
      justify-content: center;

      &-text {
        margin: 0 $space-sm;
        color: shade-dark(0.4);
        font-size: $font-size-xs-bump;

        a {
          color: shade-dark(0.4);

          &:hover {
            color: color(link-hover-color);
          }
        }
      }
    }
  }

  &-affiliates-title,
  &-products-title,
  &-donate-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: $space;
  }

  &-donate {
    text-align: center;

    &-type {
      margin-bottom: $space-md;

      &-currency {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: $font-size-small;
        margin-bottom: $space-xs;

        &-icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: $space-xs;
          background-size: 100%;

          &.is-ETH {
            background-image: url('~assets/images/ether.png');
          }

          &.is-BTC {
            background-image: url('~assets/images/bitcoin.png');
          }
        }
      }

      &-address {
        display: block;
        padding: $space-xs $space-sm;
        background: shade-dark(0.06);
        border: 1px solid shade-dark(0.12);
        font-size: $font-size-xs;
        border-radius: 4px;
        word-wrap: break-word;
        @include mono;
      }
    }
  }
}