/* Tabbed fieldsets CSS - minimal styles for RefinedModelAdmin */

.content-editor-invisible {
  /* We can't simply use display: none. Some admin widgets need to know
   * their dimensions, so we can't have that -- use an alternative way
   * to hide the modules. */
  visibility: hidden !important;
  height: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Basic tabbed interface styles */
#tabbed .tabs {
  border-bottom: 1px solid #e8e8e8;
}

#tabbed .modules {
  margin-bottom: 30px;
}

.tabs {
  display: flex;
}

.tabs > .tab {
  text-transform: none;
  letter-spacing: 0;
  float: left;
  padding: 8px 10px;
  margin: 0 4px 0 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  color: var(--body-quiet-color, #666);
  background: var(--darkened-bg, #f8f8f8);
  border: 1px solid var(--hairline-color, #e8e8e8);
  border-bottom: none;
  user-select: none;
  transition:
    0.15s background,
    0.15s color;
}

.tabs > .tab:hover {
  background: #f0f0f0;
}

.tabs > .active {
  background: var(--button-bg, #79aec8);
  color: white;
  border-color: #e8e8e8;
  border-bottom: 1px solid white;
  margin-bottom: -1px;
}

.tabs > .active:hover {
  background: var(--button-hover-bg, #609ab6);
}

.tabs > [data-region^="_unknown_"],
.tabs > .has-error {
  border-color: var(--error-fg, #ba2121);
  color: var(--error-fg, #ba2121);
  background: var(--darkened-bg, #f8f8f8);
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767px) {
  .tabbed-modules .form-row {
    padding-left: 10px;
    padding-right: 10px;
  }
}
