/* ==========================================================
   BUTTON: Primary Filled Small Text + Icon
   ========================================================== */

.button-primary-filled-small-texticon {
  display: flex;
  padding: 0.25rem 0.625rem;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  background: var(--color-primary-button-primary);
}

.button-primary-filled-small-texticon-text {
  color: var(--color-text-inverse);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: var(--label-font);
  line-height: 160%; /* 1.4rem */
}

.button-primary-filled-small-texticon-icon {
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  fill: var(--Transparent-Transparent, rgba(255, 255, 255, 0));
  background-blend-mode: multiply;
}

.button-primary-filled-small-texticon:hover {
  background: var(--color-primary-button-hover);
}

.button-primary-filled-small-texticon:active {
  background: var(--color-primary-button-active);
}

/* ==========================================================
   BUTTON: Primary Filled Large Text + Icon
   ========================================================== */

.button-primary-filled-large-texticon {
  display: flex;
  padding: 1rem;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  background: var(--color-primary-button-primary);
}

.button-primary-filled-large-texticon-text {
  color: var(--color-text-inverse);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: var(--label-font);
  line-height: 2rem; /* 177.778% */
}

.button-primary-filled-large-texticon-icon {
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1 / 1;
  fill: var(--Transparent-Transparent, rgba(255, 255, 255, 0));
  background-blend-mode: multiply;
}

.button-primary-filled-large-texticon:hover {
  background: var(--color-primary-button-hover);
}

.button-primary-filled-large-texticon:active {
  background: var(--color-primary-button-active);
}

/* ==========================================================
   BUTTON: Secondary Filled Large Text + Icon
   ========================================================== */

.button-secondary-filled-large-texticon {
  display: flex;
  padding: 1rem;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  background: var(--color-secondary-button-primary);
}

.button-secondary-filled-large-texticon-text {
  color: var(--color-text-primary);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: var(--label-font);
  line-height: 2rem; /* 177.778% */
}

.button-secondary-filled-large-texticon-icon {
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1 / 1;
  fill: var(--Transparent-Transparent, rgba(255, 255, 255, 0));
  background-blend-mode: multiply;
}

.button-secondary-filled-large-texticon:hover {
  background: var(--color-secondary-button-hover);
}

.button-secondary-filled-large-texticon:active {
  background: var(--color-secondary-button-active);
}

/* ==========================================================
   BUTTON: Primary Button Stretched
   ========================================================== */

.primary-button-streched {
  display: flex;
  height: 4rem;
  padding: 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  background: var(--color-primary-button-primary);
}

.primary-button-streched-text {
  color: var(--color-text-inverse);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: var(--label-font);
  line-height: 2rem; /* 177.778% */
}

.primary-button-streched-icon {
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1 / 1;
  fill: var(--Transparent-Transparent, rgba(255, 255, 255, 0));
  background-blend-mode: multiply;
}

.primary-button-streched:hover {
  background: var(--color-primary-button-hover);
}

.primary-button-streched:active {
  background: var(--color-primary-button-active);
}

/* ==========================================================
   RESPONSIVE: Tablet (max-width: 1024px)
   ========================================================== */

@media screen and (max-width: 1024px) {
  .button-primary-filled-small-texticon,
  .button-primary-filled-large-texticon,
  .button-secondary-filled-large-texticon,
  .primary-button-streched {
    padding: 0.6rem;
    gap: 0.5rem;
  }

  .button-primary-filled-small-texticon-text,
  .button-primary-filled-large-texticon-text,
  .button-secondary-filled-large-texticon-text,
  .primary-button-streched-text {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }

  /* Optional Resizing - Commented
  .button-primary-filled-small-texticon-icon,
  .button-primary-filled-large-texticon-icon,
  .button-secondary-filled-large-texticon-icon,
  .primary-button-streched-icon {
    width: 1.50rem;
    height: 1.50rem;
  }
  */
}

/* ==========================================================
   RESPONSIVE: Mobile (max-width: 480px)
   ========================================================== */

@media screen and (max-width: 480px) {
  .button-primary-filled-small-texticon,
  .button-primary-filled-large-texticon,
  .button-secondary-filled-large-texticon,
  .primary-button-streched {
    flex-direction: row;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    gap: 0.5rem;
  }

  .button-primary-filled-small-texticon-text,
  .button-primary-filled-large-texticon-text,
  .button-secondary-filled-large-texticon-text,
  .primary-button-streched-text {
    font-size: 0.6rem;
    line-height: 1.4rem;
  }

  .button-primary-filled-small-texticon-icon,
  .button-primary-filled-large-texticon-icon,
  .button-secondary-filled-large-texticon-icon,
  .primary-button-streched-icon {
    display: none;
    width: 1rem;
    height: 1rem;
  }
}