button {
  .show-when-enabled { display: initial; }
  .show-when-disabled { display: none; }

  &[disabled] {
    .show-when-enabled { display: none; }
    .show-when-disabled { display: initial; }
  }
}

::selection {
  color: var(--bs-white);
  background-color: var(--bs-dark);
}

a {
  color: var(--bs-primary);
}

mark {
  background-color: var(--bs-light);
}

.link, .nav-link-underline {
  text-decoration: none;
}

.link:hover, .nav-link-underline:hover {
  text-decoration: underline;
}

.link[target="_blank"]:after, .nav-link[target="_blank"]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: -3px 3px 3px 5px;
  opacity: 0.3;
}

.image-hover:hover {
  opacity: 0.5;
}

.form-group:not(.boolean) {
  margin-bottom: 0.5rem;
}

.form-control.is-valid, .form-select.is-valid {
  background-image: none;
  border-color: #ced4da;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0px 0px 0px 3px var(--bs-light);
}

.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0px 0px 0px 3px rgba(255, 0, 0, .1);
}

td .form-control, td .form-select {
  border-color: #fff;
  background-color: #f8f9fa;
}

td .input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

td .input-group-text {
  border-color: #f8f9fa;
}

input[readonly], input[readonly]:focus {
  background-color: #f8f9fa;
}

.form-check-label, .form-check-input.is-valid ~ .form-check-label, .form-check-input.is-valid {
  color: initial;
  border-color: #ced4da;
}

.form-check-input:checked {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}

.form-check-input.is-valid:checked {
  background-color: var(--bs-primary);
}

.pagination {
  --bs-pagination-color: var(--bs-dark);
  --bs-pagination-hover-color: var(--bs-primary);
  --bs-pagination-focus-color: var(--bs-primary);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.pagination a:focus {
  box-shadow: 0px 0px 0px 3px var(--bs-light);
}

.scrollarea {
  overflow-y: auto;
}

.table-responsive td {
  min-width: 150px;
}

.table-responsive td.fit-content {
  min-width: fit-content;
}

.table-fixed-first-column th:first-child, 
.table-fixed-first-column td:first-child {
  position: sticky;
  left: 0px;
}

.top-navbar {
  top: 56px;
}

.might-overflow {
  text-overflow: ellipsis;
  overflow : hidden;
  white-space: nowrap;
}

.might-overflow:hover {
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}