.dsm-plugin-section,
.dsm-category-section {
  border-top: 1px solid #e2e2e2;
}

.dsm-category-section:nth-child(2) {
  border: none;

  .dsm-category-header {
    margin-top: -8px;
  }
}

.dsm-category-section:last-child {
  .dsm-category-header:not(.dsm-expanded) {
    padding-bottom: 5px;
  }
}

.dsm-plugin-section {
  padding: 10px 0 10px 25px;
}

.dsm-category-header {
  padding: 11px 0 13px;
}

.dsm-plugin-title-bar {
  color: var(--dcg-custom-text-color, #222);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .dcg-toggle-view {
    margin-top: -7px;
  }
}

.dsm-plugin-header,
.dsm-category-header {
  cursor: pointer;
  display: flex;
  margin-right: 10px;
  align-items: center;
  flex: 1;

  .dsm-caret-container {
    transform: rotate(-90deg);
    transition: transform 200ms;
    color: #999;
    margin-right: 10px;

    &.dsm-caret-expanded {
      transform: rotate(0deg);
    }
  }
}

.dsm-plugin-section,
.dsm-category-header.dsm-expanded {
  position: relative;

  &::after {
    position: absolute;
    left: 8px;
    bottom: 5px;
    content: "";
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    animation: dcg-fadeIn 0.3s;
  }
}

.dsm-category-header.dsm-expanded::after {
  top: 30px;
}

.dsm-plugin-section::after {
  top: 5px;
}

.dsm-plugin-info-body {
  padding: 5px 0;
  color: var(--dcg-custom-text-color-shaded, #444);

  a {
    color: rgb(var(--dsm-primary-color-rgb));
  }
}

.dsm-settings-item {
  padding-top: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;

  label {
    cursor: pointer;
  }

  &:not(.dsm-settings-boolean) label {
    padding-inline: 0.5em;
    white-space: nowrap;
  }

  &.dsm-settings-number {
    flex-wrap: wrap;

    input {
      width: 20%;
    }
  }

  .dsm-settings-color-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    .flex {
      display: flex;
      align-items: center;
    }
  }

  .dsm-settings-color-list {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 0;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid black;
    min-width: 100px;
    flex-grow: 999;

    .dsm-settings-color-list-item-container {
      position: relative;
      display: flex;

      .add-remove-buttons {
        display: none;
      }

      &:hover .add-remove-buttons {
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        background-color: #ffffffaa;

        .dsm-btn-icon {
          width: 30px;
          margin-top: -3px;
        }
      }
    }

    input[type="color"] {
      border: none;
      margin: 0;
      padding: 0;
      outline: none;
      appearance: none;
      width: 100%;
    }

    // for some reason these only work if separated
    input[type="color"]::-webkit-color-swatch,
    input[type="color"]::-webkit-color-swatch-wrapper {
      border: none;
      margin: 0;
      padding: 0;
      outline: none;
    }
  }

  input[type="text"],
  input[type="password"] {
    width: 100%;
  }

  input[type="number"],
  input[type="range"] {
    width: 30%;
  }

  .dsm-reset-btn {
    opacity: 0.6;
    flex: 1;
    text-align: right;
  }

  .dcg-tooltip-hit-area-container {
    // Desmos uses important, so we must use important to override it
    cursor: pointer !important;
  }
}

.dsm-settings-indentation {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

// For compatability with custom background colors
.dcg-popover-title {
  // override #fff
  background-color: transparent !important;
}

.dsm-version-number {
  margin-left: auto;
  margin-top: auto;
  font-size: 0.8rem;
  color: #909090;
}

.dsm-title-version-grid {
  display: grid;
  grid-template-columns: auto auto;
}
