.button-download,
.button-download-text {
  /* Local Variables */

  --_min-size: var(--size-14);
  --_ideal-size: var(--size-19);
  --_max-size: 100%;

  --_bg-color: var(--clr-surface-03);
  --_border-color: var(--clr-forSurface-03);
  --_text-color: var(--clr-onSurface-03--bold);

  --_windows: #2d74d7;
  --_windows-accent: #f4f9ff;
  --_windows-fade: #194685;
  --_apple: #ffffff;
  --_apple-accent: #000000;
  --_apple-fade: #cccccc;
  --_google: #ff3a44;
  --_google-accent: #fff;
  --_google-fade: #a00008;
  --_android: #7cdb5a;
  --_android-accent: #fff;
  --_android-fade: #48aa25;

  /* Default Sizing */

  min-width: 0;
  height: var(--size-19);
  min-width: min-max(var(--_min-size), var(--_ideal-size), var(--_max-size));
  padding: var(--spacing-4, 1rem);
  flex: 1;

  /* Default Style */

  border-radius: var(--radius-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--_border-color);
  background-color: var(--_bg-color);

  /* Interactions */

  transition: background var(--ts-slow), border var(--ts-slow);
  cursor: pointer;
}

@media (width >= 80rem) {
  .button-download,
  .button-download-text {
    --_min-size: var(--size-19);
  }
}

.button-download,
.button-download-text .icon {
  transition: color var(--ts-normal), transform var(--ts-quick);
}

@media (hover) {
  .button-download:hover .icon,
  .button-download-text:hover .icon {
    transform: scale3d(1.25, 1.25, 1.25);
    transition: color var(--ts-normal), transform var(--ts-quick);
  }
}

.button-download {
  display: grid;
  place-items: center;
}

.button-download-text {
  --_bg-color: var(--clr-base-900);
  display: flex;
  padding-block: var(--spacing-4, 1rem);
  padding-inline: var(--spacing-6);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4, 1rem);
  align-self: stretch;

  border-radius: var(--radius-2, 0.125rem);
  background-color: var(--_bg-color);

  color: var(--_text-color);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  font-family: Work Sans;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 133.333% */
  text-transform: uppercase;

  width: 240px;
}

.button-download span,
.button-download-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button-download .icon,
.button-download-text .icon {
  color: var(--_text-color);
  flex-shrink: 0;
}

/** Platforms **/

/* Windows  */
.button-download.windows .icon,
.button-download-text.windows .icon {
  --_text-color: var(--_windows);
}

@media (hover) {
  .button-download.windows:hover,
  .button-download-text.windows:hover {
    --_bg-color: var(--_windows-fade);
    --_border-color: var(--_windows);
    --_text-color: var(--_windows-accent);
  }
  .button-download.windows:hover .icon,
  .button-download-text.windows:hover .icon {
    --_text-color: var(--_windows-accent);
  }
}

/* Android  */
.button-download.android .icon,
.button-download-text.android .icon {
  --_text-color: var(--_android);
}

@media (hover) {
  .button-download.android:hover,
  .button-download-text.android:hover {
    --_bg-color: var(--_android-fade);
    --_border-color: var(--_android);
    --_text-color: var(--_android-accent);
  }
  .button-download.android:hover .icon,
  .button-download-text.android:hover .icon {
    --_text-color: var(--_android-accent);
  }
}

/* apple  */
.button-download.apple .icon,
.button-download-text.apple .icon {
  --_text-color: var(--_apple);
}

@media (hover) {
  .button-download.apple:hover,
  .button-download-text.apple:hover {
    --_bg-color: var(--_apple-fade);
    --_border-color: var(--_apple);
    --_text-color: var(--_apple-accent);
  }
  .button-download.apple:hover .icon,
  .button-download-text.apple:hover .icon {
    --_text-color: var(--_apple-accent);
  }
}

/* google  */
.button-download.google .icon,
.button-download-text.google .icon {
  --_text-color: var(--_google);
}

@media (hover) {
  .button-download.google:hover,
  .button-download-text.google:hover {
    --_bg-color: var(--_google-fade);
    --_border-color: var(--_google);
    --_text-color: var(--_google-accent);
  }
  .button-download.google:hover .icon,
  .button-download-text.google:hover .icon {
    --_text-color: var(--_google-accent);
  }
}