/**
 * Reference these style sheet from Settings app
 */

/**
 * Settings style & layout
 * note: `lists.css' must be loaded before this stylesheet
 */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  overflow: hidden;
}


/******************************************************************************
 * Setting panels: full-size <section role="region"> blocks
 */

/* Setting panels: full-size <section role="region"> blocks */
section[role="region"] {
  position: absolute;
  top: 0;
  offset-inline-start: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #f4f4f4;
  overflow: hidden;
}

/**
 * Headers should not scroll with the rest of the page, except for #root.
 */
section[role="region"] > header {
  position: absolute;
}

section[role="region"] > div {
  position: absolute;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 5rem);
  overflow-y: scroll;
  will-change: scroll-position;
}


/******************************************************************************
 * Explanation texts
 */

.explanation {
  padding: 0.5rem 3rem;
  font-style: italic;
  font-size: 1.4rem;
  color: #505859;
}

.description {
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
  -moz-hyphens: auto;
}

.description p,
.description a,
.description label {
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
}

.description label {
  padding: 0;
}

.description label span {
  height: auto;
  min-height: 6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
}

.description small {
  font-size: 1.7rem;
  color: #505859;
}

.hint label span {
  top: 2.9rem !important;
}

.hint span {
  line-height: 6rem;
}

.hint .explanation {
  font-style: normal;
  position: relative;
  margin-top: -2rem;
  padding: 0.5rem 4rem 1.3rem;
  padding-inline-start: 1.5rem;
  white-space: normal;
}

.hint > gaia-switch ~ .explanation,
.hint > label:not([for]) ~ .explanation {
  padding-inline-end: 8rem;
}

.hint .explanation[hidden] {
  display: none;
}

/******************************************************************************
 * Update device name dialog
 */
#update-device-name > section input {
  margin: 1rem 0;
}