.toggle-outer {
  position: relative;
}

.toggle-panel {
  transition: all 0.5s ease-out;
  height: 0;
  overflow: hidden;
}
.toggle-panel.is-active:not(.is-anim) {
  height: auto;
  overflow: visible;
}
details.toggle-panel {
  height: auto;
}

.toggle-panel--partial {
  height: calc(2.5em + 0.75rem);
}

.toggle-panel--opacity {
  opacity: 0;
  height: auto;
}
.toggle-panel--opacity.is-active {
  opacity: 1;
}

.toggle-panel--none {
  height: auto;
  display: none;
  transition: none;
}
.toggle-panel--none.is-active {
  display: block;
}

.toggle-panel--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

.toggle-btn, .toggle-panel-content, .toggle-dialog-content {
  padding: 0.75rem 1rem;
  background-color: #F5F7FA;
}

.toggle-btn {
  display: block;
  width: 100%;
  color: #135CA4;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  border: none;
  border-radius: none;
  transition: all 0.3s;
}
.toggle-btn:hover {
  color: #1976D2;
}
.toggle-btn:hover, .toggle-btn.is-active {
  background-color: #E6ECF2;
}

.toggle-btn--icon {
  display: flex;
  align-items: center;
}
.toggle-btn--icon .toggle-text {
  margin: -0.5em 0 -0.5em auto;
  padding: 0 0 0 0.5em;
  font-size: 2rem;
}

.toggle-accordion {
  border-top: 2px solid #E6ECF2;
  border-bottom: 2px solid #E6ECF2;
}
.toggle-accordion + .toggle-accordion {
  border-top: 0;
}

.toggle-btn-tabs {
  display: flex;
}
.toggle-btn-tabs .toggle-btn {
  border-bottom: 2px solid #E6ECF2;
}
.toggle-btn-tabs .toggle-btn:not(:last-child) {
  border-right: 2px solid #E6ECF2;
}

.toggle-dialog, .toggle-dialog-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.toggle-dialog {
  z-index: 10000;
  width: 100%;
  height: 100%;
  overflow: scroll;
  overscroll-behavior: contain;
  display: none;
  opacity: 0;
  transition: all 0.5s ease-out;
  background: none;
  border: none;
  padding: 0;
}
.toggle-dialog.is-anim, .toggle-dialog.is-active {
  display: flex;
}
.toggle-dialog.is-active {
  opacity: 1;
}
.toggle-dialog-content {
  position: relative;
  z-index: 10;
  max-width: 500px;
  margin: auto;
}

.toggle-dialog-background {
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
}

body.has-dialog {
  overflow: hidden;
}