$table-highlight-bg: rgba(0, 0, 0, 0.05);
$table-highlight-color: #212529;
$table-header-fs: large;
$description-color: #5c5c5c;

$gap-spacer: 5px;
$col-widths: (10: 10%, 15: 15%, 35: 35%, 80: 80%);

$animation-duration: 0.3s;

#settings_plugin_wled {
  .fw-bold {
    font-weight: bold;
  }
  .gap-left {
    margin-left: $gap-spacer;
  }
  .gap-right {
    margin-right: $gap-spacer;
  }
  @each $direction in (center, left, right){
    .text-align-#{$direction}{
      text-align: $direction;
    }
  }

  tr.table-heading {
    color: $table-highlight-color;
    background: $table-highlight-bg;
    // any element within a th or td
    > * > *:not(.description) {
      font-size: $table-header-fs;
      font-weight: bold;
      vertical-align: middle;
    }
    > * > * > .description {
      vertical-align: bottom;
      color: $description-color;
      font-size: small;
    }
    > * > p {
      padding-top: 5px;
    }
  }
  tr.table-heading-2 {
    color: $table-highlight-color;
    background: $table-highlight-bg;
    vertical-align: middle;
  }

  .checkbox-label {
    // similar to .checkbox but doesn't push the checkbox to the left
    display: inline-block;
    margin-bottom: 0;
    padding-top: 5px;
    vertical-align: middle;
    > input {
      margin-top: 0;
    }
  }

  // Backport of OctoPrint core PR #4103 which changes all the dialog animations

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes backgroundFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.7;
    }
  }

  .fade-in {
    animation-name: fadeIn;
    animation-duration: $animation-duration;
  }

  .modal-backdrop:not(.fade) {
    // Slightly fade in the backdrop when BS2 animation is disabled
    // Breaks completely disabling animations, but the backdrop is generated by BS2
    animation-name: backgroundFadeIn;
    animation-duration: $animation-duration;
  }
}
#WLEDConnectionSettings {
  .text-align-left {
    text-align: left !important;
  }
}

.wled-nav-button {
  float: left;
  font-size: 20px;
}

@each $name, $width in $col-widths {
  .colwidth-#{$name}{
    width: #{$width};
  }
}

d-block {
  display: block;
}
.visibility-collapse {
  visibility: collapse;
}


.effect-overview {
  margin-left: 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  > * {
    padding-left: 0.2rem;
  }
}

.input-flex-container {
  display: flex;
  align-items: center;
  &> * > input {
    margin-left: 0.5rem;
  }
}
