#modify-event-view.loading button {
  pointer-events: none;
}

#modify-event-view.loading > form {
  display: none;
}

#modify-event-view form {
  overflow-Y: auto;
  height: calc(100% - 5rem);
}

#modify-event-view form ol {
  margin: 1rem 1.5rem 0;
  overflow: hidden;
}

#modify-event-view .button {
  margin-bottom: 0;
}

#modify-event-view .button input {
  font-size: 1.6rem;
}

#modify-event-view form ol li {
  margin: 0 0 0.5rem;
}

#modify-event-view li.end-date,
#modify-event-view li.start-date {
  box-sizing: border-box;
  width: 60%;
  padding-inline-end: 0.5rem;
}
html[dir="ltr"] #modify-event-view li.end-date,
html[dir="ltr"] #modify-event-view li.start-date {
  float: left;
}
html[dir="rtl"] #modify-event-view li.end-date,
html[dir="rtl"] #modify-event-view li.start-date {
  float: right;
}

#modify-event-view li.end-time,
#modify-event-view li.start-time {
  text-align: center;
  width: calc(40% - 1px);
}
html[dir="ltr"] #modify-event-view li.end-time,
html[dir="ltr"] #modify-event-view li.start-time {
  float: left;
}
html[dir="rtl"] #modify-event-view li.end-time,
html[dir="rtl"] #modify-event-view li.start-time {
  float: right;
}

#modify-event-view li.notes  {
  height: 10rem;
}

#modify-event-view li.notes textarea {
  padding: 1rem 1.5rem;
  height: 100%;
  font-size: 1.7rem;
  line-height: 1.3em;
  overflow-y: auto;
}

#modify-event-view li.allday {
  padding: 0;
  padding-inline-start: 1.5rem;
  margin: 0 0 1rem;
  font-size: 1.9rem;
  line-height: 4rem;
  font-weight: normal;
}

#modify-event-view h3 {
  padding: 0;
  padding-inline-start: 1.5rem;
  font-size: 1.9rem;
  line-height: 3rem;
  font-weight: normal;
}

#modify-event-view li.allday > label {
  height: 100%;
  width: 100%;
  padding: 0;
  padding-inline-end: 5rem;
  line-height: 1.3em;
}

#modify-event-view li.allday > label > span:after {
  offset-inline-start: auto;
  offset-inline-end: 0;
}

#modify-event-view.allday .start-time,
#modify-event-view.allday .end-time {
  visibility: hidden;
}

#modify-event-view.update .calendar-id {
  display: none;
}

#modify-event-view.create .current-calendar {
  display: none;
}

/* remove button padding and set the input height to avoid cropping arabic text
 * (Bug 1154633) */
#modify-event-view .current-calendar .button {
  padding-top: 0;
  padding-bottom: 0;
}

#modify-event-view .calendar-id,
#modify-event-view .current-calendar {
  clear: both;
}

#modify-event-view .alarms .button {
  margin: 0.25rem 0;
}

#modify-event-view .delete {
  width: calc(100% - 3rem);
  margin: 0 auto;
}

#modify-event-view.readonly menu,
#modify-event-view.create .delete-record,
#modify-event-view.readonly .delete-record {
  display: none;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */

#modify-event-view.create .save-text {
  display: block !important; /* 1 */
}

#modify-event-view.create .done-text {
  display: none !important; /* 1 */
}

#modify-event-view.update .save-text {
  display: none !important; /* 1 */
}

#modify-event-view.update .done-text {
  display: block !important; /* 1 */
}

#modify-event-view .save[aria-disabled="true"] {
  pointer-events: none;
}