/* TODO: use bocss variables instead of hardcoded values */
:root {
  --bocss-toggle-text: #333;
  --bocss-toggle-text--active: #fff;
  --bocss-toggle-background: #fff;
  --bocss-toggle-background-active: #397ab2;
  --bocss-toggle-border-color: #ccc;
  --bocss-toggle-border-color-active: #285e8e;
}

html[data-theme='dark'] {
  --bocss-toggle-text: #fff;
  --bocss-toggle-text--active: #fff;
  --bocss-toggle-background: #1a1820ff;
  --bocss-toggle-background-active: #397ab2;
  --bocss-toggle-border-color: #fff;
  --bocss-toggle-border-color-active: #fff;
}

.boc-docs-toggle {
  align-self: flex-end;
  text-align: right;
}

/* TODO: Create our own toggle without relying on boostrap */
.boc-docs-toggle [data-value='false'] {
  border-radius: 0 3px 3px 0 !important; /* stylelint-disable-line declaration-no-important */
}

.boc-docs-toggle [data-value='true'],
.boc-docs-toggle [data-value='false'] {
  background-color: var(--bocss-toggle-background);
  color: var(--bocss-toggle-text);
  border-color: var(--bocss-toggle-border-color);
}

.boc-docs-toggle [data-value='true'].active,
.boc-docs-toggle [data-value='false'].active {
  background-color: var(--bocss-toggle-background-active);
  color: var(--bocss-toggle-text--active);
  border-color: var(--bocss-toggle-border-color-active);
}

.boc-interactive-docs-examples {
  margin-bottom: 1.5rem;
}

.boc-docs-example-text {
  display: none;
  margin-bottom: 1.5rem;
}

.boc-docs-example-text.visible {
  display: block;
}

.boc-docs-option-description {
  margin: 0 1.5rem 2rem;
}

.boc-docs-option-description ul {
  padding-left: 1.6em;
}

.boc-docs-boolean-container {
  display: flex;
  justify-content: end;
  align-self: center;
  flex: 1;
  margin-left: auto;
}

.boc-docs-select-container,
.boc-docs-text-container {
  align-self: center;
  flex: 1;
}

.boc-docs-field-name {
  font-family: monospace;
  font-size: 1.5em;
}

.boc-docs-field-description {
  margin-top: 5px;
}

.boc-docs-params-cell {
  flex: 1;
}

/* TODO Use relative units */
.boc-interactive-docs-params {
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  gap: 20px;
  flex-direction: row;
  padding-bottom: 15px;
  padding-top: 10px;
}

/* Add border top to the first item only */
#preview + h2 + .boc-interactive-docs-params {
  border-top: 1px solid #e4e4e4;
}

.boc-interactive-docs-params .bocss-input__text,
.boc-interactive-docs-params .bocss-select {
  font-family: monospace;
}

.boc-docs-component-error {
  border: 1px solid #ff5959;
  box-shadow: 0 0 3px 0 #ffc6c6;
  border-radius: 5px;
  padding: 1ex;
  margin-bottom: 1ex;
}

/* Adding color to the share component in 'icon-only' to avoid white color over white background */
.bocss-share--icon-only > .bocss-button {
  color: var(--text-color);
}