@import url(root.css);
@import url(search.css);
@import url(appShortcuts.css);
@import url(bottom.css);
@import url(settings.css);
@import url(developerCredit.css);

/* icons ------- */
svg {
  height: 100%;
  width: 100%;
}
.ic-search {
  fill: var(--soft-accent);
}

/* basic show hide classes  */
.show {
  display: block;
}
.hide {
  display: none;
}

/* Switch Buttons - Rounded  */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--text-color), transparent 70%);
  -webkit-transition: 200ms;
  transition: 200ms;
  border-radius: 34px;
  box-shadow: 1px 1px 3px #0004;
}
.switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--light-background);
  -webkit-transition: 200ms;
  transition: 200ms;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: var(--soft-accent);
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
  box-shadow: 1px 1px 3px #0001;
}
.switch input:checked + .slider::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* List tile setup --------------
.listTile
  .icon?
  .title
  .switch
*/
.listTile {
  display: flex;
  gap: 1rem;
  align-items: top;
  padding: 10px;
  margin: 10px 0;
  box-shadow:
    1px 1px 3px #0000000d,
    inset 1px 1px 3px #ffffff0d;
  border-radius: 30px;
  align-items: center;
}
.listTile.disabled {
  opacity: 50%;
  pointer-events: none;
}
.listTile .icon {
  height: 38px;
  padding: 5px 10px;
  fill: var(--text-color);
}
.listTile .title {
  display: inline-block;
  flex-grow: 1;
  font-size: large;
  padding: 5px;
  font-weight: 700;
}

/* nav ---------- */
nav {
  padding: 1rem;
  margin-bottom: 1rem;
}
.brandLogo {
  color: var(--accent);
  font-size: 30px;
  margin-left: 1rem;
  display: inline-block;
}
.brandLogo img {
  max-height: 75px;
  filter: drop-shadow(2px 2px 2px #0003);
}
.brandLogo svg {
  fill: var(--accent);
  max-height: 70px;
  max-width: 70px;
  padding: 0.7rem;
  background-color: var(--light-accent);
  outline: 1px solid var(--accent);
  border-radius: 35px;
}

/* time section =----------- */
.timeSection {
  height: 20vh;
  /* outline: 2px solid; */
  margin-bottom: 1rem;
  padding: 5px;
}
.timeSection .dayBox {
  margin: auto;
  width: fit-content;
}
.timeSection #day {
  font-size: 70px;
  font-family: Anurati;
  letter-spacing: 20px;
  /* color: color-mix(in srgb-linear, var(--accent), var(--light-accent) 10%); */
  color: var(--accent);
}
.timeSection .timeBox {
  font-size: 14px;
  letter-spacing: 3px;
  width: fit-content;
  margin: auto;
  color: hsl(from var(--soft-accent) h s calc(l * 0.7));
}

/* popup bg --- */

.popupBg {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(3px);
  background: color-mix(in srgb, #0003, var(--accent) 1%);
}
.popupBg.show {
  display: block;
}