/* loading */

body.loading {
  visibility: hidden;
}

/* general elements */

a:active {
  border: none;
}

p {
  font-size: 1.5rem;
  line-height: 130%;
}

menu[type="tablist"] a {
  text-decoration: none;
}

ol.link-list label,
ol.link-list a {
  display: block;
  min-height: 5.5rem;
  line-height: 5.5rem;
  font-size: 1.7rem;
  padding: 0 1.5rem;
  border-bottom: 0.1rem solid #C5C5C5;
  text-decoration: none;
  color: #000;
  margin: 0 1.5rem;
}

ol.link-list li:last-child label,
ol.link-list li:only-child label,
ol.link-list li:last-child a,
ol.link-list li:only-child a {
  border-bottom: 0;
}

#today .icon-calendar-today {
  font-size: 1.4rem;
}

#today .icon-calendar-today:before {
  position: absolute;
  font-size: 3rem;
  line-height: 4.2rem;
  offset-inline-start: 50%;
  transform: translateX(-52%); /* BiDi-proof */
}

#time-views {
  visibility: hidden;
}

body[data-path="/month/"] #time-views,
body[data-path="/week/"] #time-views,
body[data-path="/day/"] #time-views,
body[data-path="/settings/"] #time-views {
  visibility: visible;
}

#view-selector > .today {
  border-inline-end: 0.1rem solid #F2F2F2;
}

#view-selector a[aria-selected="true"] {
  color: #00aacc;
  font-weight: 500;
}

body[data-path="/month/"] #view-selector > .month a:after,
body[data-path="/week/"] #view-selector > .week a:after,
body[data-path="/day/"] #view-selector > .day > a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 0.3rem);
  border-bottom: 0.3rem solid #00aacc;
}

body[data-path="/month/"] #view-selector > .month a:active,
body[data-path="/week/"] #view-selector > .week a:active,
body[data-path="/day/"] #view-selector > .day > a:active {
  color: #5F5F5F;
}

.bb-tablist > li > a:after,
.bb-tablist > li > button:after {
  display: block !important;
}

/* view management */

.fullscreen-view {
  display: none;
}

.fullscreen-view.active {
  display: block;
}

#time-views {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#time-views > section {
  display: none;
  position: relative;
  height: calc(100% - 9.5rem);
  background: #fff;
}

#time-views > section.active {
  display: block;
}

#time-header [type="toolbar"] {
  opacity: 1;
  transition: opacity var(--transition-duration) ease;
}

.settings-drawer-visible #time-header [type="toolbar"] {
  opacity: 0;
}

/* view loading */

.during-progress {
  display: none;
}

#views .in-progress .during-progress {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 200;
  background-color: #CCC;
  opacity: 0.5;
  text-align: center;
}

#progress-indicator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.3rem;
  border: none;
  overflow: hidden;
  z-index: 1000;
  display: none;
}

.pending-operation #progress-indicator {
  display: block
}

#throbber {
  height: 5.2rem;
  background: url('ui/progress.png') repeat-x;
  background-size: 32rem;
  animation: .5s throb infinite steps(12);
}
html[dir="ltr"] #throbber { background-position: left bottom; }
html[dir="rtl"] #throbber { background-position: right bottom; }

@keyframes throb {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -4.8rem);
  }
}

#advanced-settings-view section.content {
  height: calc(100% - 5rem);
  overflow-y: scroll;
}

#advanced-settings-view .create-account-item {
  text-align: center;
}

#advanced-settings-view button {
  margin: 1.1rem auto;
  width: calc(100% - 3rem);
}

#advanced-settings-view .settings-list label {
  height: auto;
  margin: 0 1.5rem;
  padding: 0.5rem 0 1.5rem;
  line-height: 100%;
}

#advanced-settings-view .settings-list label span {
  display: block;
  margin-bottom: 0;
  font-size: 1.9rem;
  line-height: 3.3rem;
  text-align: start;
}

#advanced-settings-view .settings-list label span:first-child {
  padding-inline-start: 1.5rem;
}

#advanced-settings-view .settings-list label,
#advanced-settings-view .account-list a {
  text-transform: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 3rem);
}

/* For the account listing, want the final child to still have
   a bottom border to separate it from the Add Account button */
#advanced-settings-view .account-list li:last-child label,
#advanced-settings-view .account-list li:only-child label,
#advanced-settings-view .account-list li:last-child a,
#advanced-settings-view .account-list li:only-child a {
  border-bottom: 0.1rem solid #C5C5C5;
}

#advanced-settings-view .account-list .error a {
  background: transparent url('icons/accountwarning.png') no-repeat;
  background-size: 2rem auto;
}
html[dir="ltr"] #advanced-settings-view .account-list .error a {
  background-position: left;
  padding-left: 2.7rem;
}
html[dir="rtl"] #advanced-settings-view .account-list .error a {
  background-position: right;
  padding-right: 2.7rem;
}

#advanced-settings-view .preset:after {
  content: ' - '
}

#advanced-settings-view .user {
  width: 50%;
}

/* create account view */
#create-account-view > p {
  margin: 0 2rem;
}

.fullscreen-view.active {
  visibility: visible;
}

.fullscreen-view {
  z-index: 1000;
  overflow: hidden;
  visibility: hidden;
  /* completely override other views */
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%
}

/* [BB][tabs]*/
#view-selector {
  position: absolute;
  bottom: 0;
  height: 4.5rem;
}

#view-selector > li > a {
  outline: none;
}

@keyframes fade-status {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

section[role="status"] {
  pointer-events: none;
  display: none;
}

section[role="status"].active {
  display: block;
  animation-name: fade-status;
  animation-delay: 2.5s;
  animation-duration: 1.5s;
}

/* Hide on initial render to prevent flashing */
#settings {
  visibility: hidden;
}

body[data-path^='/settings'] #settings {
  visibility: visible;
}

/* these settings avoid conflicts with the shared icons */
.gaia-icon {
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

/* for accessiblity only, fonts should not be visible */
gaia-header > a > span {
  font-size: 0;
}

/* these icons uses a 32px base grid so we need to adjust the font size
 * (shared font uses a 3rem base font-size) */
.icon-calendar-alarm:before,
.icon-calendar-bullet:before,
.icon-calendar-dot:before,
.icon-calendar-today:before,
.icon-calendar-eventalarm:before {
  font-size: 3.2rem;
}