/*
Style Download_Button (from Widget)
See detailed documentation in Dev/mediawiki
*/

.download-button-v2 {
  display: inline-block;
  border-radius: 50px;
  position: relative;
  background: #eee;
  transition: background-color .3s, border-color .3s;
  max-width: 100%;
  box-shadow: inset 0 0 4px rgba(0,0,0,.05);
  vertical-align: middle;
}
.download-button-v2:hover {
  background: #e4e4e4;
  border-color: #cdcdcd;
  text-decoration: none;
}
.download-button-v2:hover .dbutton {
  background-image: linear-gradient( #4180d1 0%, #005aae 100%);
  color: white;
}

.download-button-v2 .dbutton {
  display: table-cell;
  border-radius: 50px;
  background-image: linear-gradient( #4d8cdd 0%, #0867bb 100%);
  position: relative;
  padding: 7px 25px 7px 3em;
  color: #eaf1ff;
  font-weight: bold;
  transition: color .3s, background-image .3s;
  text-align: center;
}

.download-button-v2 .dbutton:before {
  content: '';
    height: calc( 100% - 1px );
    position: absolute;
    border-right: 1px solid #7bb1ea;
    top: 0;
    left: 2.4em;
}

.download-button-v2 .dbutton > i {
    position: absolute;
    left: .9em;
    top: calc( 50% - .55em );
}

.download-button-v2 .dbutton > span {
  position: relative;
  top: -1px;
}

.download-button-v2 .op-sys {
  display: table-cell;
  text-align: center;
  position: relative;
  top: -2px;
  padding: 0 15px 0 10px;
}

.download-button-v2 .op-sys > img {
  margin: 0;
  margin-right: 6px;
  position: relative;
}
.download-button-v2 .op-sys > img:last-child {
  margin-right: 0;
}
.download-button-v2 .op-sys > img.osx {
  top: -1px;
}

/* Following element Onion link (optional) */

.download-button-v2 + .onion-download {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('/w/images/thumb/a/a8/Iconfinder_tor_386502.png/50px-Iconfinder_tor_386502.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-left: 8px;
  margin-top: -1px;
  vertical-align: middle;
}

/* ----- */
/* Modal */

#download-button-modal > .content {
  background-color: white;
  padding: 28px 30px;
}

#download-button-modal .donation-appeal {
  color: #555;
}

/* Area donate options */

#download-button-modal .donation-options {
  display: flex;
  margin: auto;
  justify-content: center;
  gap: 1em;
  margin-bottom: 40px;
}

#download-button-modal .donation-options > * {
  cursor: pointer;
  transition: transform .2s, filter .2s;
}

#download-button-modal .donation-options > *:hover {
  transform: scale( 1.1 );
  filter: brightness( 1.05 );
}

#download-button-modal .donation-options .padded-content-icon:first-child {
  margin-left: .2em;
}

/* Area payment modules and payment options */

#download-button-modal .payment-modules > *:not(.active) {
  display: none;
}

#download-button-modal .pay-via-crypto.donation-panel .qr-button {
  width: 35%;
  min-width: 182px;
}

#download-button-modal .pay-via-crypto.donation-panel .qr-code-image {
  width: max( 60%, 280px );
}

#download-button-modal .pay-via-crypto.donation-panel .expand {
  margin-top: 25px;
}

#download-button-modal .pay-via-crypto.donation-panel .code-select {
  width: 62%;
}

#download-button-modal .pay-via-crypto.donation-panel,
#download-button-modal .pay-via-bank.donation-panel {
  width: unset;
  padding: unset;
  background: unset;
}

#download-button-modal [data-target-payment="pay-via-crypto"] {
  height: 3.23em;
  position: relative;
}

#download-button-modal [data-target-payment="pay-via-crypto"] img {
  height: inherit;
}

#download-button-modal [data-target-payment="pay-via-crypto"] img:first-child {
  margin: 0 -.6em 0 -1em;
}

#download-button-modal [data-target-payment="pay-via-crypto"] span {
  position: absolute;
  bottom: -23px;
  left: calc(50% - 38px);
  font-size: .8em;
  border-radius: 4px;
  padding: 0 5px 2px;
}

/* Area file info and donation other */

#download-button-modal .file-info,
#download-button-modal .donation-other {
  text-align: center;
  background: #e5e5e5;
  margin: 25px -30px 14px;
  padding: 7px 15px;
}

#download-button-modal .file-info {
  margin: 20px -30px 15px;
}

#download-button-modal .donation-other a {
  font-weight: bold;
}

#download-button-modal .file-name {
  font-weight: bold;
  display: block;
}

#download-button-modal .download-trigger {
  margin: auto;
  display: block;
  width: 61.8%;
  border-radius: 50px;
  padding: 1em 2em;
  font-weight: bold;
  background-image: linear-gradient( #b4b4b4 0%,#8b8b8b 100%);
  color: white;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  transition: transform .2s;
}

#download-button-modal .download-trigger.is-ready {
  background-image: linear-gradient( #4d8cdd 0%,#0867bb 100%);
}

#download-button-modal .download-trigger.is-ready:hover {
  background-image: linear-gradient( #4180d1 0%,#005aae 100%);
  transform: scale( 1.1 );
}

#download-button-modal .download-trigger.is-ready .ready,
#download-button-modal .download-trigger:not(.is-ready) .waiting {
  display: block;
}
#download-button-modal .download-trigger:not(.is-ready) .ready,
#download-button-modal .download-trigger.is-ready .waiting {
  display: none;
}

/* Area donate legal disclaimer */

#download-button-modal .donate-legal-disclaimer {
  margin: 30px 0 5px;
  padding: 7px 1px 0;
  color: #777;
  font-size: 12px;
  text-align: justify;
}

#download-button-modal .donate-legal-disclaimer a {
  font-size: 12px;
  color: #0645ad;
}

/* ------------- */
/* Mobile Tweaks */

@media (max-width: 450px) {
  .download-button-v2 {
    font-size: 13px;
    padding-right: 12px;
  }

  .download-button-v2 .dbutton {
    padding: 6px 16px 6px 50px;
  }

  .download-button-v2 .dbutton:before {
    left: 43px;
  }

  .download-button-v2 .dbutton > i {
    left: 14px;
  }

  .download-button-v2 .op-sys > img {
    height: 16px;
  }

  #download-button-modal .donation-options {
    gap: .6em;
  }
}

/*
[[Category:MultiWiki]]
*/