/* #region Layout */

.options-wrapper {
  display: flex;
  flex-direction: column;
  background-color: rgb(33, 33, 33);
  padding: 10px;
  border-radius: 10px;
  gap: 10px;
}

.settings-section {
  display: flex;
  flex-direction: column;
}

.modal-header.settings {
  font-size: clamp(28px, 26.86px + 0.357vw, 32px);
  font-weight: bold;
}

.settings-header {
  font-size: clamp(16px, 14.86px + 0.357vw, 20px);
  color: var(--orange);
}

.settings-subheader {
  font-size: var(--text);
  color: var(--light-gray);
  margin-bottom: 3px;
}

.settings-option-title {
  font-size: var(--text);
  color: var(--white);
  margin-right: 10px;
}

.modal-body.settings {
  height: 450px;
  overflow-y: auto;
  gap: 12px;
}

.settings-svg {
  width: clamp(24px, 22.29px + 0.536vw, 30px);
  height: clamp(24px, 22.29px + 0.536vw, 30px);
  color: var(--light-gray);
}

.settings-btn {
  all: unset;
  display: flex;
  cursor: pointer;
  display: flex;
  transition: transform 0.2s ease;
}

.settings-btn:active {
  transform: scale(0.95);
}

.settings-option-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-svg-title-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* #endregion */

/* #region Checkbox */

.settings-checkbox {
  all: unset;
  display: flex;
  cursor: pointer;
  display: flex;
}

.settings-checkbox-svg.unchecked {
  width: var(--svg);
  height: var(--svg);
  color: var(--light-gray);
}

.settings-checkbox-svg.checked {
  display: none;
  width: var(--svg);
  height: var(--svg);
  color: var(--green);
}

.settings-checkbox.is-checked .settings-checkbox-svg.unchecked {
  display: none;
}

.settings-checkbox.is-checked .settings-checkbox-svg.checked {
  display: block;
}

/* #endregion */

/* #region Macros */

.settings-edit-input:focus {
  border: 2px solid var(--orange);
  outline: none;
}

.settings-edit-input {
  display: flex;
  padding: 0;
  border-radius: clamp(4px, 3.43px + 0.179vw, 6px);
  font-family: "Cal Sans";
  font-size: var(--text);
  box-sizing: border-box;
  color: var(--white);
  background: var(--light-gray);
  border: 2px solid transparent;
  text-align: center;
  width: clamp(45px, 37.86px + 2.232vw, 70px);
}

/* #endregion */

/* #region Widgets */

.settings-title-svg {
  width: var(--svg);
  height: var(--svg);
}

.settings-title-svg.hydration {
  color: rgb(37, 198, 251);
}

.settings-title-svg.supplements {
  color: rgba(139, 92, 246);
}

.settings-title-svg.weight {
  color: rgb(255, 128, 0);
}

.settings-title-svg.notes {
  color: rgb(155, 155, 155);
}

/* #endregion */

/* #region SIgn out */

.sign-out {
  display: flex;
  align-items: center;
}

.sign-out-wrap {
  cursor: pointer;
  justify-content: center;
  margin-top: 10px;
}

.sign-out-svg {
  width: var(--svg);
  height: var(--svg);
  color: var(--red);
}

.sign-out-text {
  font-size: var(--text);
  color: var(--red);
}

/* #endregion */