/* RentGuarantor CSS: toggle-button.css (source: src/assets/scss/_toggle-button.scss) */
.toggle-button-container {
  display: inline-flex;
  gap: 0;
  position: relative;
  background-color: #eaedef;
  border-radius: 10px;
  isolation: isolate;
  padding: 4px;
  height: 52px;
  --pill-left: 0px;
  --pill-width: 0px;
}
.toggle-button-container::before {
  content: "";
  position: absolute;
  top: 4px;
  left: var(--pill-left, 0);
  width: var(--pill-width, 50%);
  height: 44px;
  background-color: #00d7a6;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.toggle-btn {
  position: relative;
  height: 44px;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  color: var(--color-core-navy);
  font-family: "Sora", sans-serif;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 0;
  z-index: 2;
  transition: color 0.15s ease;
}
.toggle-btn-lg {
  font-size: 18px;
  line-height: 26px;
  padding-left: 25px;
  padding-right: 25px;
  letter-spacing: -0.36px;
}
.toggle-btn-sm {
  font-size: 16px;
  line-height: 26px;
  padding-left: 16px;
  padding-right: 16px;
  letter-spacing: -0.32px;
}
@media screen and (min-width: 768px) {
  .toggle-btn:active {
    color: white !important;
  }
}
.toggle-btn:hover {
  scale: 1;
}

@media screen and (min-width: 768px) {
  .toggle-button-container:has(.toggle-btn:active)::before {
    background-color: #00bf93;
  }
}

.toggle-button-container.clicking::before {
  background-color: #00bf93;
}

.toggle-text {
  position: relative;
  z-index: 1;
}