/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/forms";

/* icon variables ---------------------------------------------------- */
$icon-required: "*" !default;
$icon-nbsp: " " !default;
$icon-alert-info: "\f646" !default;
$icon-alert-warning: "\f33a" !default;
$icon-alert-danger: "\f622" !default;
$icon-star: "\f588" !default;
$icon-star-fill: "\f586" !default;
$icon-star-sep: $icon-nbsp !default;
$icon-stars: $icon-star-fill + $icon-star-sep + $icon-star-fill + $icon-star-sep + $icon-star-fill + $icon-star-sep + $icon-star-fill + $icon-star-sep + $icon-star-fill !default;
$icon-trash: "\f5de" !default;
$icon-sort: "\F127" !default;
$icon-sort-ascending: "\f57a" !default;
$icon-sort-descending: "\f574" !default;
$icon-sort-numbers: (
    1: "\f797",
    2: "\f79d",
    3: "\f7a3",
    4: "\f7a9",
    5: "\f7af",
    6: "\f7b5",
    7: "\f7bb",
    8: "\f7c1",
    9: "\f7c7"
) !default;

/* non-bootstrap variables --------------------------------------- */

$tobago-page-padding-top: 1rem;
$tobago-header-margin-bottom: $tobago-page-padding-top;
$tobago-flex-layout-spacing: 0.5rem;

/* utilities ----------------------------------------------------- */
.tobago-display-inline-block {
  display: inline-block;
}

/* mixins ---------------------------------------------------------- */
@mixin adjustCustomControlLabel() {
  .form-check-label {
    &:after {
      content: "";
    }

    img {
      padding-right: 0.3em;
    }
  }
}

@mixin badgeBtn() {
  &.badge.btn {
    --#{$prefix}btn-border-width: 0; //badge have no border; a button with markup badge should also have no border
  }
}

@mixin buttonLinkDisabledCursor() {
  &:disabled {
    pointer-events: auto;

    &:hover {
      cursor: not-allowed;
    }
  }
}

@mixin imageTextSpacing() {
  > img + span {
    margin-left: .4em;
  }
  > i + span {
    margin-left: .4em;
  }
}

@mixin formControlFocusShadows() {
  //_form-control:focus from bootstrap
  @if $enable-shadows {
    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
  } @else {
    // Avoid using mixin so we can pass custom focus shadow properly
    box-shadow: $input-focus-box-shadow;
  }
}

@mixin formControlFocus() {
  //_form-control:focus from bootstrap
  color: $input-focus-color;
  background-color: $input-focus-bg;
  border-color: $input-focus-border-color;
  outline: 0;
  @include formControlFocusShadows();
}

@mixin inlinePadding() {
  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
}

@mixin linkWithoutUnderline() {
  > .tobago-link {
    text-decoration: none;
  }
}

@mixin markupHideToggleIcon() {
  &.tobago-hideToggleIcon:after {
    content: none;
  }
}

@mixin messagesHelpContainer($tobago-form-validation-states) {
  @each $state, $data in $tobago-form-validation-states {
    @include form-validation-state($state, $data...);
  }

  width: 100%;

  &.tobago-button-left, &.tobago-button-right {
    @include messageLayoutPopover();
    display: flex;
    align-items: flex-start;
  }

  &.tobago-tooltip {
    position: relative;
  }

  .tobago-none {
    //this is for TobagoClassUnitTest
  }
}

@mixin messageLayoutPopover() {
  &.tobago-button-left {
    > tobago-popover {
      margin-right: 0.75rem;
    }
  }
  &.tobago-button-right {
    > tobago-popover {
      margin-left: 0.75rem;
    }
  }
  tobago-popover > a {
    --#{$prefix}btn-padding-x: .4rem;
  }
}

@mixin radioCheckboxInline() {
  label + .form-check-inline {
    display: block; // must be 'block' to make labelLayout=top work for inline=true
  }
}

@mixin selectListBase() {
  display: block;

  &.tobago-label-container {
    .dropdown, .list-group {
      flex: 1 0 0;
      min-width: 0;
    }
  }

  &.tobago-focus {
    .dropdown .tobago-select-field {
      @include formControlFocus();
      @include selectListBorderColorShadow("danger", $danger);
      @include selectListBorderColorShadow("warning", $warning);
      @include selectListBorderColorShadow("info", $info);
    }

    .list-group {
      --#{$prefix}list-group-color: #{$input-focus-color};
      --#{$prefix}list-group-bg: #{$input-focus-bg};
      --#{$prefix}list-group-border-color: #{$input-focus-border-color};

      @include formControlFocusShadows();
      @include selectListBorderColorShadow("danger", $danger);
      @include selectListBorderColorShadow("warning", $warning);
      @include selectListBorderColorShadow("info", $info);
    }
  }

  &.tobago-disabled {
    .tobago-select-field {
      color: $form-select-disabled-color;
      background-color: $form-select-disabled-bg;
      border-color: $form-select-disabled-border-color;
    }
  }

  .list-group {
    height: inherit;
    max-height: inherit;
    @include box-shadow($form-select-box-shadow);
    @include transition($form-select-transition);

    &.border-danger, &.border-warning, &.border-info {
      .list-group-item {
        border-color: inherit;
      }
    }

    .list-group-item.tobago-select-field {
      border-bottom-color: $list-group-border-color;
    }
  }

  .dropdown {
    min-width: 0;
  }

  .tobago-select-item-group {
    font-weight: bold;
    pointer-events: none;
  }

  .tobago-select-item span {
    padding-left: 0.75rem;
  }

  .tobago-select-field {
    display: flex;
    align-items: center;

    &.dropdown-toggle::after {
      content: none;
    }

    &.list-group-item.form-control {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
    }

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

    .tobago-filter {
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 0;
      flex: 1 0 0;
      min-width: 3rem;
      background-color: transparent;
      min-height: 0; //Overwrite min-height of form-control-sm/lg; TOBAGO-2281

      &:focus {
        box-shadow: none;
      }

      &:read-only {
        width: 0;
        min-width: 0;
        flex-grow: 0;
      }
    }
  }

  .tobago-options {
    &.tobago-dropdown-menu {
      /* Use .tobago-dropdown-menu instead of .dropdown-menu to prevent Bootstrap from creating a dropdown instance.
         This leads to javascript error if arrow up/down is pressed. */
      @extend .dropdown-menu
    }

    &.list-group-item {
      padding: 0;
      overflow-y: auto;
    }

    .table {
      margin-bottom: 0;

      &.tobago-large {
        font-size: $form-select-font-size-lg;
      }

      &.tobago-small {
        font-size: $form-select-font-size-sm;
      }

      tbody tr {
        cursor: pointer;

        &.tobago-disabled {
          color: $form-select-disabled-color;
          background-color: $form-select-disabled-bg;
          border-color: $form-select-disabled-border-color;
          cursor: initial;
          pointer-events: none;
        }

        &.tobago-preselect {
          --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
          color: var(--#{$prefix}table-hover-color);
        }

        &:last-of-type {
          td {
            border-bottom-width: 0;
          }
        }
      }

      tfoot tr.tobago-no-entries {
        color: $dropdown-link-disabled-color;
        text-align: center;

        td {
          border-bottom-width: 0;
        }
      }
    }
  }
}

@mixin selectListBorderColorShadow($name, $color) {
  &.border-#{$name} {
    box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
  }
}

@mixin tobagoDropdownMenu() {
  .tobago-dropdown-menu {
    /* Use .tobago-dropdown-menu instead of .dropdown-menu to prevent Bootstrap from creating a dropdown instance.
       This leads to javascript error if arrow up/down is pressed. */
    @extend .dropdown-menu;

    .form-check {
      /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
      $paddingLeftCheckboxRadio: (divide($dropdown-item-padding-x, 1rem) + $form-check-padding-start);
      padding-left: $paddingLeftCheckboxRadio;

      &.form-switch {
        padding-left: $paddingLeftCheckboxRadio + ($form-switch-width - $form-check-input-width);
      }
    }

    label[for] {
      width: 100%; //increased clickable area for checkbox/radio button label
    }
  }
}

@mixin tobagoTreeNodeToggle() {
  .tobago-toggle:not(.invisible) {
    cursor: pointer;
  }
}

@mixin treeNodeMarginLeftLevel() {
  @for $i from 0 through 20 {
    tobago-tree-node[data-tobago-level='#{$i}'] {
      margin-left: #{$i}rem;
    }
  }
}

.tobago-auto-spacing {
  /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
  "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
  custom styling is much more complicated. */
  margin-bottom: $spacer;
}

tobago-badge {
  @include badgeBtn();
  @include imageTextSpacing();

  &.btn {
    cursor: initial; //revert cursor attribute on .btn class
  }

  // to make badges visible, an default class .badge-secondary is problematic because of the !important modifier
  background-color: $secondary;
}

/* bar -------------------------------------------------------------- */

tobago-bar {
  &.navbar-light .navbar-brand > .tobago-link {
    color: $navbar-light-active-color;

    &:hover, &:focus {
      text-decoration: none;
    }
  }

  &.navbar-dark .navbar-brand > .tobago-link {
    color: $navbar-dark-active-color;

    &:hover, &:focus {
      text-decoration: none;
    }
  }

  .navbar-brand {
    /* Normally links are underlined. A navbar-brand link is NOT underlined. In Tobago, the .navbar-brand class is not
    on the link itself but on the parent tag. */
    @include linkWithoutUnderline();
  }

  tobago-links.tobago-auto-spacing {
    margin-bottom: 0;
  }
}

tobago-behavior {
  display: none;
}

/* box -------------------------------------------------------------- */

tobago-box {
  > .card-body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.tobago-box-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.card-header {

  > h3:first-child {
    margin-bottom: 0;
    align-self: center;
  }

  .navbar {
    padding: 0;
  }
}

.tobago-button {
  @include buttonLinkDisabledCursor();
  @include imageTextSpacing();
  @include badgeBtn();
  @include markupHideToggleIcon();

  &.badge {
    @each $color, $value in $theme-colors {
      &.btn-#{$color} {
        --#{$prefix}badge-color: #{color-contrast($value)};
      }
    }
  }
}

/* button -------------------------------------------------------------- */

/* XXX for what is this needed?
a.tobago-button {
  &.btn-primary:focus {
    color: $btn-primary-color;
  }
  &.btn-secondary:focus {
    color: $btn-secondary-color;
  }
}
*/

button.tobago-button {
  &:disabled {
    cursor: not-allowed;

    img, span {
      pointer-events: none;
    }
  }
}

tobago-buttons {
  > .tobago-button {
    display: inline-block;
  }

  > tobago-dropdown:last-child > .tobago-button.dropdown-toggle-split:first-child {
    //split buttons in Tobago have a tobago-dropdown tag included, which leads to an issue with border-radius
    border-top-right-radius: var(--#{$prefix}btn-border-radius);
    border-bottom-right-radius: var(--#{$prefix}btn-border-radius);
  }
}

/* collapsible -------------------------------------------------------------- */

tobago-box.tobago-collapsed .card-body,
tobago-section.tobago-collapsed .tobago-section-content,
tobago-panel.tobago-collapsed {
  display: none;
}

/* date -------------------------------------------------------------- */

tobago-date {
  display: block;

  input {
    min-width: 7em;

    &::-ms-clear {
      /* Remove IE10's "clear field" X button */
      display: none;
    }
  }
}

.tobago-now {
  // dummy for unit tests
}

tobago-dropdown {
  display: inline-block; //make tobago-dropdown height the same the inner button. Important for dropdown-menu position

  @include tobagoDropdownMenu();

  &.tobago-dropdown-submenu {
    cursor: pointer;
    position: relative;
    width: 100%;
    float: right;

    &.tobago-show {
      background-color: $dropdown-link-hover-bg;

      > .tobago-dropdown-menu:not(.tobago-disabled) {
        display: block;
      }
    }

    > .dropdown-item::after {
      content: " ";
      float: right;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: #cccccc;
      margin-top: 7px;
      margin-right: -10px;
    }

    > .tobago-dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -0.5rem;
      margin-left: -1px;
    }
  }
}

.tobago-dropdown-open, .tobago-dropdown-select {
  // deprecated; must be added for test
}

tobago-file {
  display: block;

  > .input-group {
    flex: 1 0 0px;
  }
}

/* flexLayout -------------------------------------------------------------- */

tobago-flex-layout {
  display: flex;
  min-width: 0;
  /* without this, Firefox/Webkit are different from IE:
     Set the minimal width to zero make flex-layout responsive for the width,
     even if there is overflowing content.
     currently e.g. PRE-code blocks in the demo are too wide. XXX */
  margin-left: -$tobago-flex-layout-spacing * 0.5;
  margin-right: -$tobago-flex-layout-spacing * 0.5;

  > * {
    margin-left: $tobago-flex-layout-spacing * 0.5;
    margin-right: $tobago-flex-layout-spacing * 0.5;
  }

  > tobago-flex-layout {
    margin-left: 0;
    margin-right: 0;
  }
}

/* the non-label-element inside of a label-layout with flex box */
.tobago-label-container {
  display: flex;
  align-items: center;

  > label:first-child {
    margin-right: $tobago-flex-layout-spacing;
    align-self: flex-start;
  }

  > label:last-child {
    margin-left: $tobago-flex-layout-spacing;
    align-self: flex-start;
  }

  > label {
    // XXX needs to be customizable
    width: 155px;
  }

  > {
    .form-control, .form-select, .form-control-plaintext,
    .input-group, .tobago-messages-container {
      flex: 1 0 0px;
    }
  }

  > .form-check {
    /* .form-check has a margin-bottom which will be normally ignored, except in a label layout
   this results in different hights for form-check components with label and itemLabel */
    margin-bottom: 0;
  }
}

tobago-flow-layout {
  &.tobago-text-justify {
    /* added here, because Bootstrap has removed .text-justify */
    text-align: justify !important;
  }

  display: block;
}

/* focus --------------------------------------------------------------- */
tobago-focus {
  display: none;
}

tobago-footer {
  display: block;
  background-color: $white;
  padding: $navbar-padding-y ($container-padding-x * .5);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}

/* form -------------------------------------------------------------- */

.tobago-form {
}

/* gridLayout -------------------------------------------------------------- */

tobago-grid-layout {
  display: -ms-grid;
  display: grid;
  border-spacing: 0;
  border-collapse: collapse;
  grid-column-gap: $spacer; // old
  column-gap: $spacer;

  .tobago-label-container > {
    textarea, .tobago-selectManyListbox {
      height: 100%;
    }
  }
}

/* header ----------------------------------------------------------- */
tobago-header {
  display: block;
}

tobago-header {
  margin-bottom: $tobago-header-margin-bottom;

  &.sticky-top {
    margin-top: -$tobago-page-padding-top;
    margin-left: -($grid-gutter-width * .5);
    margin-right: -($grid-gutter-width * .5);
  }
}

.tobago-help-container {
  @function exclamation-circle-icon($color) {
    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>");
  }
  $tobago-form-validation-states: (
      "help": (
          "color": $info,
          "icon": none
      )
  );

  @include messagesHelpContainer($tobago-form-validation-states);

  &.tobago-tooltip .help-tooltip {
    display: block;
  }

  &.tobago-text-top, &.tobago-text-bottom {
    .help-feedback {
      display: block;
    }
  }

  &.tobago-text-top {
    .help-feedback {
      margin-bottom: $form-feedback-margin-top;
    }
  }
}

/* image ----------------------------------------------------------- */

tobago-image.disabled {
  filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
}

tobago-image {
  display: inline-block;

  > img {
    width: 100%;
    height: 100%;
    max-width: inherit;
    max-height: inherit;
  }
}

/* in ----------------------------------------------------------- */
tobago-in {
  display: block;

  .input-group {
    > tobago-dropdown {
      /* fix corner styling, because tobago-dropdown use a surrounding container inside an input group */
      &:not(:last-child) > .tobago-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:not(:first-child) > .tobago-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    tobago-select-one-choice {
      /* fix style for surrounding container (tobago-select-one-choice).
      According to bootstrap docs, <select class=.form-select> should be rendered directly to .input-group. But tobago
      renders the tobago-select-one-choice custom tag (which contain the select component) inside an input group. */
      &.form-select {
        padding: 0;

        > .form-select {
          border: 0;
        }
      }
    }
  }

  &.autocomplete[data-loading=true] .autocomplete-pseudo-container {
    position: absolute;

    &:after {
      content: "";
      border: 3px solid rgba(0, 0, 0, .12);
      border-right-color: rgba(0, 0, 0, .48);
      border-radius: 100%;
      width: 20px;
      height: 20px;
      position: absolute;
      z-index: 5;
      transform: translateY(-50%);
      animation: rotate 1s linear infinite
    }
  }

  .autocomplete-result-list {
    cursor: pointer;
  }

  tobago-suggest {
    display: none;
  }
}

@keyframes rotate {
  0% {
    transform: translateY(-50%) rotate(0deg)
  }
  to {
    transform: translateY(-50%) rotate(359deg)
  }
}

.tobago-in-markup-number {
  text-align: right;
}

.autocomplete-result-list {
  padding: $dropdown-padding-y $dropdown-padding-x;
  list-style: none;
  background-color: $dropdown-bg;
  border: $dropdown-border-width solid $dropdown-border-color;
  @include border-radius($dropdown-border-radius);
  @include box-shadow($dropdown-box-shadow);
  overflow-y: auto;

  .autocomplete-result {
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;

    &:hover, &:focus, &[aria-selected=true] {
      color: $dropdown-link-hover-color;
      @include gradient-bg($dropdown-link-hover-bg);
    }

    &:active {
      color: $dropdown-link-active-color;
      @include gradient-bg($dropdown-link-active-bg);
    }
  }
}

/* label ----------------------------------------------------------- */

tobago-links {
  .nav .nav-item .nav-link {
    padding: $nav-link-padding-y $nav-link-padding-x;
  }
}

/* link ----------------------------------------------------------- */

.tobago-link {
  @include imageTextSpacing();
  @include markupHideToggleIcon();
  white-space: nowrap;

  span {
    white-space: normal
  }

  &.nav-link {
    &:focus, &:hover {
      text-decoration: none;
    }
  }
}

a.tobago-link.dropdown-item {
  img, span {
    display: inline-block; /* fix for IE11 - :active selector doesn't work for nested elements */
    pointer-events: none;
  }
}

button.tobago-link {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  button.tobago-link {
    font-size: inherit;
    font-weight: inherit;
  }
}

button {
  &.tobago-link.btn {
    @include buttonLinkDisabledCursor();

    padding: 0;
    border: 0;
    vertical-align: baseline;

    &:focus {
      box-shadow: none;
    }

    &:disabled {
      /* bootstrap reduce opacity for disabled buttons.
      This results in a different text color for greyed out button.tobago-link */
      opacity: 1;
    }
  }

  &.tobago-link.dropdown-item {
    @include buttonLinkDisabledCursor();
  }

  &.nav-link { /* bootstrap don't know button.nav-link*/
    padding: .55em $nav-link-padding-x .45em;
  }
}

.navbar-nav button.nav-link {
  padding-left: 0;
  padding-right: 0;
}

.tobago-messages-container {
  @function exclamation-circle-icon($color) {
    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>");
  }
  $tobago-form-validation-states: (
      "error": (
          "color": $danger,
          "icon": exclamation-circle-icon($danger)
      ),
      "warning": (
          "color": $warning,
          "icon": exclamation-circle-icon($warning)
      ),
      "info": (
          "color": $info,
          "icon": exclamation-circle-icon($info)
      )
  );

  @include messagesHelpContainer($tobago-form-validation-states);

  &.tobago-button-left, &.tobago-button-right {
    .form-control {
      padding-right: $input-padding-x;
      background-image: none;
    }
  }

  &.tobago-tooltip {
    .error-tooltip, .warning-tooltip, .info-tooltip {
      display: block;
    }
  }

  &.tobago-text-top, &.tobago-text-bottom {
    .error-feedback, .warning-feedback, .info-feedback {
      display: block;
    }
  }

  &.tobago-text-top {
    .error-feedback, .warning-feedback, .info-feedback {
      margin-bottom: $form-feedback-margin-top;
    }
  }
}

.tobago-popover-box {
  display: none;
  width: max-content;

  &.show {
    display: block;
  }
}

a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
  padding-left: 0.4em;
  padding-right: 0.4em;
}

tobago-messages label {
  display: block;

  &:last-child {
    margin-bottom: 0;
  }
}

tobago-messages {
  $alert-icon-padding-x: $alert-padding-x * .8;
  $alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x;

  .alert.alert-dismissible {
    padding-left: $alert-icon-width;

    &:before {
      font-family: bootstrap-icons;
      position: absolute;
      left: 0;
      padding-left: $alert-icon-padding-x;
      padding-right: $alert-icon-padding-x;
      width: $alert-icon-width;
      text-align: center;
    }

    &.alert-danger:before {
      content: $icon-alert-danger;

    }

    &.alert-warning:before {
      content: $icon-alert-warning;
    }

    &.alert-info:before {
      content: $icon-alert-info;
    }
  }

  .tobago-messages {
    //this is for TobagoClassUnitTest
  }
}

.popover .popover-body {
  // allow linebreaks for messages / help text
  white-space: pre-line;
}

/* nav ----------------------------------------------------------- */

/* no bottom border in navtabs, if panel-body under it */
.nav-tabs {
  border-bottom-width: 0;

  > li.active > a {
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    background-repeat: repeat-x;
    border-bottom: #dddddd;

    &:hover {
      border-bottom: #dddddd;
    }
  }
}

.tobago-dropdown-menu .form-check {
  display: block;
}

/* object ----------------------------------------------------------------- */
.tobago-object {
}

/* out -------------------------------------------------------------------- */

tobago-out {
  display: inline-block;
}

.tobago-deleted {
  text-decoration: line-through;
}

.tobago-number {
  display: block;
  text-align: right;
}

/* make sure, tc:out has always the same height, no matter if value is empty */
span.tobago-out:empty:before {
  content: "\200b";
}

.table-dark .form-control-plaintext {
  color: $white;
  // was in bs4: color: $table-dark-color;
}

tobago-overlay {
  display: flex;
  align-items: center;
  justify-content: center;

  &.modal-backdrop {
    --#{$prefix}backdrop-zindex: #{$zindex-sticky - 1}; //less than the bootstrap navbar
    --#{$prefix}backdrop-bg: rgba(#{red($gray-400)}, #{green($gray-400)}, #{blue($gray-400)}, #{$modal-backdrop-opacity});
    --#{$prefix}backdrop-opacity: 1;

    &:not(.show) {
      display: none;
    }
  }
}

tobago-page {
  display: block;
  padding-top: $tobago-page-padding-top;
  padding-bottom: 1rem;

  .tobago-page-menuStore {
    @include tobagoDropdownMenu();

    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: $zindex-popover;
  }

  .tobago-page-toastStore {
    .toast {
      &.tobago-hideCloseButton .tobago-close {
        display: none;
      }

      .toast-header {
        .tobago-close {
          margin-left: auto;
        }
      }

      .toast-body {
        .tobago-close {
          float: right;
        }
      }

      .tobago-auto-spacing {
        margin-bottom: 0;
      }
    }
  }
}

.tobago-page-noscript {
  position: absolute;
  top: 100px;
  left: 100px;
  right: 100px;
  height: 50px;
  border: 1px solid black;
  padding: 30px;
  background-color: white;
  font-size: 15px;
}

.tobago-spread {
  height: 100%;

  &tobago-panel {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* panel ------------------------------------------------------------- */

// todo: remove
.tobago-panel {
}

tobago-panel {
  display: block;
}

/* popover ------------------------------------------------------------- */
tobago-popover {
}

tobago-popup {
  .modal-header {
    .modal-title {
      margin-right: auto;
    }

    .tobago-link {
      color: $btn-close-color;
      opacity: $btn-close-opacity;

      &:hover {
        opacity: $btn-close-hover-opacity;
      }

      &:focus {
        opacity: $btn-close-focus-opacity;
      }
    }
  }

  .modal-content > .card {
    margin-bottom: 0;
  }
}

/* progress ---------------------------------------------------------- */
tobago-progress {
}

tobago-range {
  align-items: center;

  .tobago-range {
  }

  .tobago-tooltip {
    position: absolute;
    background-color: $black;
    color: $white;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-radius: 0.25rem;
  }
}

label.tobago-required:after {
  content: $icon-required;
  color: $danger;
}

/* reload ---------------------------------------------------------- */
tobago-reload {
}

/* section ----------------------------------------------------------- */
tobago-section {
  display: block;

  > .tobago-header {
    display: flex;

    > {
      h1, h2, h3, h4, h5, h6 {
        /* because the parent is flex, auto margin moves components like tc:buttons to the right */
        margin-right: auto;

        > .fa:first-child, > img {
          /* to separate the icon from the rest of the title */
          margin-right: 0.7em;
        }
      }
    }
  }
}

/* stars rating ------------------------------------------------------------ */

tobago-stars {
  display: block;
}

.tobago-stars {
  .tobago-stars-container {
    position: relative;
    display: inline-block;
    color: transparent;
    font-family: bootstrap-icons;
    font-size: 1.5rem;

    &:before {
      content: $icon-stars;
    }

    .tobago-stars-focusBox {
      display: inline-block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

    .tobago-stars-slider:focus ~ .tobago-stars-focusBox {
      box-shadow: $input-box-shadow, $input-focus-box-shadow;
    }

    .tobago-stars-tooltip {
      display: inline-block;
      position: absolute;
      font-family: sans-serif;
      font-size: 1.1rem;
      background-color: $black;
      color: $white;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
      text-align: center;
      border-radius: 0.25rem;
      width: 40px;
      top: -23px;
      left: 35px;

      &.trash:before {
        font-family: bootstrap-icons;
        content: $icon-trash;
      }
    }

    .tobago-stars-selected {
      display: block;
      position: absolute;
      top: 0;
      overflow: hidden;
      white-space: nowrap;
      color: $progress-bar-bg;

      &:before {
        content: $icon-stars;
      }
    }

    .tobago-stars-slider:disabled ~ .tobago-stars-selected {
      filter: grayscale(1);
    }

    .tobago-stars-selected.tobago-placeholder {
      filter: grayscale(0.3);
    }

    .tobago-stars-unselected {
      display: block;
      position: absolute;
      top: 0;
      overflow: hidden;
      white-space: nowrap;
      color: $progress-bg;
      direction: rtl;

      &:before {
        content: $icon-stars;
      }
    }

    input[type="range"]:disabled ~ .tobago-stars-unselected {
      filter: grayscale(1);
    }

    .tobago-stars-preselected {
      display: none;
      position: absolute;
      top: 0;
      overflow: hidden;
      white-space: nowrap;
      color: lighten($progress-bar-bg, 25%);
      opacity: 0.8;

      &:before {
        content: $icon-stars;
      }

      &.show {
        display: block;
      }
    }

    .tobago-stars-slider {
      position: absolute;
      height: 100%;
      opacity: 0;
      z-index: 1;
      left: 0;
      width: 100%;

      &::-ms-tooltip {
        display: none;
      }
    }
  }
}

/* select ----------------------------------------------------------- */
.tobago-inputPseudo {
  //deprecated should be removed
}

/* selectBooleanCheckbox ---------------------------------------------------- */
tobago-select-boolean-checkbox {
  display: block;
  @include adjustCustomControlLabel();
}

/* selectBooleanToggle ---------------------------------------------------- */
tobago-select-boolean-toggle {
  display: block;
  @include adjustCustomControlLabel();
}

tobago-select-one-choice {
  display: block;
}

tobago-select-one-list {
  @include selectListBase();

  .tobago-select-field {
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

tobago-select-one-listbox {
  display: block;
}

/* selectOneRadio ---------------------------------------------------------- */
tobago-select-one-radio {
  display: block;
  @include adjustCustomControlLabel();
  @include radioCheckboxInline();

  &.tobago-label-container {
    .form-check-inline {
      @include inlinePadding();
    }
  }
}

tobago-select-many-list {
  @include selectListBase();

  &.tobago-focus[filter] .tobago-select-field {
    flex-wrap: wrap;
  }

  .tobago-select-field {
    .btn-group + .tobago-filter {
      margin-left: 0.25rem;
    }

    .tobago-badges {
      display: flex;
      flex-wrap: wrap;

      .btn-group {
        margin-right: 0.25rem;
        margin-top: 1px;
        margin-bottom: 1px;

        tobago-badge {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

tobago-select-many-checkbox {
  display: block;
  @include adjustCustomControlLabel();
  @include radioCheckboxInline();

  &.tobago-label-container {
    .form-check-inline {
      @include inlinePadding();
    }
  }
}

.tobago-selectManyCheckbox {
}

tobago-select-many-listbox {
  display: block;
}

tobago-select-many-shuttle {
  display: block;

  .tobago-body {
    display: flex;
    height: 100%; //size should be the same as the outer custom tag; important for horizontal grid layout

    .tobago-unselected-container, .tobago-selected-container {
      flex-grow: 1;
      flex-basis: 0;
      display: flex;

      div {
        flex-basis: 0;
      }
    }

    .tobago-controls .btn-group-vertical {
      padding-left: $list-inline-padding;
      padding-right: $list-inline-padding;
    }

    .tobago-unselected {
    }
  }

  &.tobago-label-container, .tobago-help-container, .tobago-messages-container {
    > .tobago-body {
      flex: 1 0 0px;
    }
  }
}

/* selectOneChoice ---------------------------------------------------------- */

/* segmentLayout ----------------------------------------------------------- */

tobago-segment-layout {
  /*
  Makes, that the height of the div is set.
  Otherwise floating elements below, may flew into the area of the segmentLayout.
  */
  /*display: inline-block;
  todo: this breaks the general layout in IE11 and others
  */
}

tobago-separator {
  display: flex;
  align-items: center;

  hr {
    flex-grow: 1;
  }

  .tobago-label {
    margin: $hr-margin-y 0.25rem;
  }

  .tobago-separator {
    //this is for TobagoClassUnitTest
  }
}

/* sheet -------------------------------------------------------------- */

tobago-sheet {
  display: flex;
  flex-direction: column;
  margin-bottom: $spacer;

  .tobago-expanded {
  }

  header {
    overflow-x: hidden;
    flex-shrink: 0; //if "column" attribute used: header must remain same height (fix overflow hidden)

    .table {
      margin-bottom: 0;

      th {
        font-weight: normal;
        position: relative;
        overflow: hidden;

        tobago-out {
          font-weight: bold;
        }
      }
    }
  }

  header:hover .tobago-resize {
    background-color: $gray-200;
  }

  .tobago-resize {
    position: absolute;
    right: -5px;
    top: 0;
    width: 10px;
    height: 100%;
    z-index: 1;
    cursor: col-resize;
  }

  .tobago-sortable {
    &:after {
      font-family: bootstrap-icons;
      content: $icon-sort;
      font-weight: normal;
      -webkit-font-smoothing: antialiased;
      vertical-align: -0.125em;
      margin-left: 0.5rem;
      opacity: 0.5;
    }

    .tobago-circle-1, .tobago-circle-2, .tobago-circle-3, .tobago-circle-4, .tobago-circle-5, .tobago-circle-6, .tobago-circle-7, .tobago-circle-8, .tobago-circle-9 {
    }

    @mixin tobago-circle($sortIcon, $number, $circleIcon) {
      &.tobago-circle-#{$number}::after {
        content: $sortIcon + $icon-nbsp + $circleIcon;
      }
    }

    &.tobago-ascending {
      &::after {
        content: $icon-sort-ascending;
        opacity: 1;
      }

      @each $number, $circle in $icon-sort-numbers {
        @include tobago-circle($icon-sort-ascending, $number, $circle);
      }
    }

    &.tobago-descending {
      &::after {
        content: $icon-sort-descending;
        opacity: 1;
      }

      @each $number, $circle in $icon-sort-numbers {
        @include tobago-circle($icon-sort-descending, $number, $circle);
      }
    }
  }

  .tobago-body {
    overflow-y: auto;
    flex: 1 1 auto;

    .table {
      margin-bottom: 0; //remove bootstrap styling; margins are set on tobago-sheet

      td {
        overflow: hidden;

        @include treeNodeMarginLeftLevel();

        > input.tobago-selected {
          margin-top: ($spacer * 0.75);
          margin-bottom: ($spacer * 0.75);
        }

        > tobago-out {
          display: block;
        }

        > tobago-tree-node {
          display: flex;
          align-items: center;

          @include tobagoTreeNodeToggle();

          .tobago-toggle {
            padding-right: 5px;
          }
        }
      }
    }
  }

  footer {
    display: flex;
    flex-wrap: wrap;

    .pagination {
      margin-top: 1rem;
      margin-bottom: 0;

      .tobago-paging {
        cursor: pointer;

        input {
          text-align: center;
          display: none;
          margin: -4px 0;
          width: 3em;
        }
      }
    }
  }
}

.tobago-tableLayout-fixed {
  table-layout: fixed;
}

/* splitLayout ---------------------------------------------------------------------- */
tobago-split-layout {
  display: flex;
}

.tobago-splitLayout {
}

.tobago-splitLayout-horizontal {
  width: .5rem;
  cursor: col-resize;
}

.tobago-splitLayout-horizontal:hover {
  border: dotted #000000 thin;
  z-index: 10000; /* TODO: check, if needed (check also with iframes) */
}

.tobago-splitLayout-vertical {
  height: .5rem;
  cursor: row-resize;
}

.tobago-splitLayout-vertical:hover {
  border: dotted #000000 thin;
  z-index: 10000; /* TODO: check, if needed (check also with iframes) */
}

tobago-tab {
  .nav-link:not([href]):not([tabindex]) {
    /* fix .nav-links without 'href'; bootstrap tab only works if 'href' is set */
    &.active {
      color: $nav-tabs-link-active-color;
      cursor: pointer;
    }

    &:not(.active) {
      color: $link-color;
      cursor: pointer;

      &:hover {
        color: $link-hover-color;
      }
    }

    &.disabled {
      color: $nav-link-disabled-color;
      cursor: not-allowed;

      &:focus, &:hover {
        color: $nav-link-disabled-color;
      }
    }
  }
}

tobago-tab.tobago-bar {
  display: flex;

  > .nav-link {
    border-right: 0;
    border-top-right-radius: 0;

    &:hover:not(.disabled):not(.active) + div {
      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
    }

    &.active + div {
      background-color: var(--#{$prefix}card-bg);
      border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
      border-bottom-color: var(--#{$prefix}card-bg);
    }
  }

  > div {
    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
    padding-left: 0;
    border: $nav-tabs-border-width solid transparent;
    border-top-right-radius: $nav-tabs-border-radius;
    border-left: 0;
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    @include transition($nav-link-transition);

    & > button {
      height: 100%;
    }

    & > a {
      display: inline-block;
      padding-top: 0.5rem;
    }
  }
}

tobago-tab-group {
  tobago-tab {
    > .nav-link {
      @include imageTextSpacing();
    }
  }
}

tobago-textarea {
  display: block;
}

tobago-toasts {
  display: none;
}

/* tree ---------------------------------------------------------------------- */

tobago-tree {
  .tobago-selected {
  }

  .tobago-expanded {
  }

  .tobago-folder {
  }
}

tobago-tree {
  @include treeNodeMarginLeftLevel();

  tobago-tree-node {
    /* Links in a tree shouldn't be underlined to look more like a menu point. */
    @include linkWithoutUnderline();

    display: block;

    tobago-tree-select {

      &.form-check-inline {
        margin-left: $spacer * .375;
        margin-right: $spacer * .375;
      }
    }
  }

  label {
    margin-bottom: 0;
  }
}

tobago-tree-node {
  cursor: default;
}

/* treeListbox ---------------------------------------------------------------------- */
tobago-tree-listbox {
  display: block;

  .tobago-level {
    display: inline-block;
    min-width: 10rem;
  }

  .tobago-selected {
    width: 100%;
  }
}

/* scroll --------------------------------------------------------- */
tobago-scroll {
}

/* config --------------------------------------------------------- */
tobago-config {
  display: none;
}
