/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --button-height: 6.4rem;
  --button-padding-x: 2.5rem;
  --button-image-width-and-height: 4rem;
  --button-medium-image-width-and-height: 3rem;
  --button-small-image-width-and-height: 2.2rem;
  --button-line-height: 1;
  --button-font-weight: 400;
  --button-gap-between-label-and-image: 1.7rem;
  --button-caret-image-margin-top: 0.2rem;
  --button-small-image-margin-top: 0.2rem;
  --button-caret-image-width: 1.1rem;
  --button-caret-image-height: 1.7rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --button-height: 5.6rem;
    --button-padding-x: 2rem;
    --button-image-width-and-height: 3.5rem;
    --button-medium-image-width-and-height: 2.2rem;
    --button-small-image-width-and-height: 2rem;
    --button-gap-between-label-and-image: 1.5rem;
    --button-caret-image-width: 1rem;
    --button-caret-image-height: 1.5rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --button-height: 5rem;
    --button-image-width-and-height: 3rem;
    --button-small-image-width-and-height: 1.5rem;
    --button-gap-between-label-and-image: 1.2rem;
    --button-caret-image-width: 0.9rem;
    --button-caret-image-height: 1.3rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --button-height: 4.6rem;
    --button-padding-x: 1.75rem;
    --button-gap-between-label-and-image: 1rem;
    --button-caret-image-width: 0.7rem;
    --button-caret-image-height: 1rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --button-height: 4rem;
    --button-padding-x: 1.5rem;
    --button-image-width-and-height: 2.5rem;
    --button-medium-image-width-and-height: 1.8rem;
    --button-small-image-width-and-height: 1.2rem;
    --button-gap-between-label-and-image: 0.8rem;
    --button-caret-image-width: 0.6rem;
    --button-caret-image-height: 0.9rem;
  }
}

.button {
  border: none;
  height: var(--button-height);
  min-width: var(--button-height);
  border-radius: calc(var(--button-height) / 2);
  font-size: var(--typography-page-text-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight);
  padding: 0 var(--button-padding-x);
  gap: var(--button-gap-between-label-and-image);
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
}

.button-image {
  width: calc(var(--button-image-width-and-height) + 0.1rem);
  height: calc(var(--button-image-width-and-height) + 0.1rem);
  object-fit: contain;
}

.button-image.inline-svg > svg path {
  fill: var(--theme-color-primary) !important;
}

.button-label {
  display: block;
}

.button.caret .button-image {
  margin-top: var(--button-caret-image-margin-top);
  width: var(--button-caret-image-width);
  height: var(--button-caret-image-height);
}

.button.medium-image .button-image {
  width: var(--button-medium-image-width-and-height);
  height: var(--button-medium-image-width-and-height);
  margin-top: var(--button-medium-image-margin-top);
}

.button.small-image .button-image {
  width: var(--button-small-image-width-and-height);
  height: var(--button-small-image-width-and-height);
  margin-top: var(--button-small-image-margin-top);
}

.button.image-only {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0
    calc((var(--button-height) - var(--button-image-width-and-height)) / 2);
}

.button.arrow-down .button-image {
  transform: rotate(90deg);
}

.button.arrow-right .button-image {
  transition: transform 0.2s ease-in-out;
}

.button.arrow-right:hover .button-image {
  transform: translateX(50%);
}

.button-primary {
  background-color: var(--theme-color-white);
  color: var(--theme-color-primary);
}

.button-secondary {
  background-color: var(--theme-color-accent);
  color: var(--theme-color-primary-90);
  border: 1px solid var(--theme-color-primary-90);
}

.button-secondary .button-image.inline-svg > svg > path {
  fill: var(--theme-color-primary-90) !important;
}

.button-accent {
  background-color: var(--theme-color-accent);
  color: var(--theme-color-border);
}

.button-accent .button-image.inline-svg > svg > path {
  fill: var(--theme-color-border) !important;
}