:root {
  --widgets-border-color: light-dark(#999, #ccc);
  --widgets-delete-border: var(--delete-color);
  --widgets-settings-border: light-dark(#ddd, #999);
  --widgets-ref-border: light-dark(#ccc, #ccc);
  --widgets-offline-link: var(--discrete-link-color);
}

#sidebarsWidgets {
  float: left;
  width: 49%;
  margin: 0 0 0 1%;
  padding: 0 1%;
}

#listWidgets {
  float: left;
  width: 49%;
  padding: 1.5em 1% 0;
  margin: 0 1% 0 0;
}

.sortable-delete {
  display: none;

  &.if-drag {
    border: 1px dotted var(--widgets-border-color);
    font-weight: bold;
    list-style-type: none;
    margin: 0 0 1em;
    padding: 0.5em 1em;
    display: block;
  }

  > li {
    margin-bottom: 3px;

    &.ui-sortable-placeholder {
      border: 1px dashed var(--widgets-delete-border);
      height: 2em;
      padding: 0.3em;
    }

    &.sortable-delete-placeholder {
      border: 0 none;
      font-size: 1em;
      font-weight: bold;
      text-align: center;
    }
  }
}

#dndnav,
#dndextra,
#dndcustom {
  padding: 1em 0;
  margin: 1em 0 0;

  & > li {
    padding: 0;
    border: 1px solid var(--widgets-border-color);
    margin-bottom: 1em;
    list-style: none;

    &.empty-widgets {
      border: 0;
    }

    &.ui-sortable-placeholder {
      border: 1px dashed var(--widgets-border-color);
      height: 2em;
      padding: 0.3em;
    }
  }

  .form-note {
    display: none;
  }
}

.widget-name {
  padding: 0.25em 0.5em;
  margin: 0;
  font-weight: bold;

  img {
    cursor: pointer;
    margin-bottom: -1px;
  }

  a.aexpand {
    &,
    &:link,
    &:visited {
      border: 0 none;
      text-decoration: none;
    }
  }
}

.offline a.aexpand {
  color: var(--widgets-offline-link);
  font-weight: normal;
}

.widgetSettings {
  border-top: 1px solid var(--widgets-settings-border);
  padding: 8px 6px;
}

#sidebarsControl {
  clear: left;
}

#widgets-ref {
  padding: 1em 0;
  margin: 1em 0 0;

  > li {
    border: 1px solid var(--widgets-ref-border);
    margin-bottom: 0.5em;
    min-height: 3em;
    padding: 0 0 4px 0;
    list-style: none;
  }

  .widget-name,
  .manual-move {
    margin-bottom: 0;
    padding: 4px 8px 0;
  }

  .widget-name {
    min-height: 3em;

    .form-note {
      display: block;
      font-style: normal;
      font-size: 0.9em;
    }
  }

  .widgetSettings {
    display: none;
  }
}

.toolsWidget {
  float: right;
  display: flex;
  flex-direction: row;
  gap: 0.25em;
}

.upWidget,
.downWidget,
.removeWidget {
  width: 1.6em;
  padding: 0.25em;
}

body.dark-mode {
  .upWidget:not(:disabled),
  .downWidget:not(:disabled) {
    filter: brightness(1.5);
  }
}

#widgets-tpl dt {
  margin: 1em 0 0 0;
  font-weight: normal;

  & code {
    font-size: smaller;
    font-size: round(nearest, calc(1em / 1.2), 1px);
  }
}
#widgets-tpl dd {
  margin: 0.2em 0 1em 0;

  & code {
    font-size: smaller;
    font-size: round(nearest, calc(1em / 1.2), 1px);
  }
}
