:root {
  --back-button-with-label-gap: 3.5rem;
  --back-button-with-label-icon-size: 2.5rem;
  --back-button-with-label-icon-width: 1.2rem;
  --back-button-with-label-icon-height: 1.6rem;
  --back-button-with-label-text-font-size: 2.4rem;
  --back-button-with-label-text-line-height: 1.2;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --back-button-with-label-gap: 2.5rem;
    --back-button-with-label-icon-size: 2.2rem;
    --back-button-with-label-icon-width: 1.1rem;
    --back-button-with-label-icon-height: 1.5rem;
    --back-button-with-label-text-font-size: var(
      --typography-page-text-font-size
    );
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --back-button-with-label-gap: 1.5rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --back-button-with-label-gap: 0.75rem;
    --back-button-with-label-icon-size: 2rem;
    --back-button-with-label-icon-width: 0.8rem;
    --back-button-with-label-icon-height: 1rem;
    --back-button-with-label-text-font-size: var(
      --typography-page-text-font-size
    );
  }
}

.back-button-with-label {
  display: inline-flex;
  align-items: center;
  gap: var(--back-button-with-label-gap);
}

.back-button-with-label-icon-container {
  display: flex;
  width: var(--back-button-with-label-icon-size);
  height: var(--back-button-with-label-icon-size);
  justify-content: center;
  align-items: center;
}

.back-button-with-label-icon {
  width: var(--back-button-with-label-icon-width);
  height: var(--back-button-with-label-icon-height);
  transform: rotate(180deg);
}

.back-button-with-label-icon > svg > path {
  fill: var(--theme-color-border);
}

.back-button-with-label-text {
  font-size: var(--back-button-with-label-text-font-size);
  line-height: var(--back-button-with-label-text-line-height);
  margin-top: 0.1rem;
}