details.sd-dropdown {

  position: relative;
  font-size: var(--sd-fontsize-dropdown);

  &:hover {
    cursor: pointer;
  }

  .sd-summary-content {
    cursor: default;
  }

  summary.sd-summary-title {
    padding: 0.5em 0.6em 0.5em 1em;
    font-size: var(--sd-fontsize-dropdown-title);
    font-weight: var(--sd-fontweight-dropdown-title);

    // make the text un-selectable
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    // hide the default triangle marker
    list-style: none;
    // chrome doesn't yet support list-style
    &::-webkit-details-marker {
      display: none;
    }

    &:focus {
      outline: none;
    }

    // The title is split into three parts:
    // 1. The icon (optional), which should be on the left
    // 2. The text, which should be in the middle, and take all available space
    // 3. The state marker, which should be on the right

    display: inline-flex;
    justify-content: space-between;

    .sd-summary-icon {
      margin-right: 0.6em;
      // align the icon vertically within its container
      display: inline-flex;
      align-items: center;
    }

    .sd-summary-icon svg {
      opacity: 0.8;
    }

    .sd-summary-text {
      flex-grow: 1;
      line-height: 1.5;
      // note, we add right padding to the text, rather than a left margin to the state marker,
      // because when you rotate the state marker, left is no longer left
      padding-right: 0.5rem;
    }

    .sd-summary-state-marker {
      pointer-events: none;
      // align the icon vertically within its container
      display: inline-flex;
      align-items: center;
    }

    // make the state marker a bit more prominent when hovered
    .sd-summary-state-marker svg {
      opacity: 0.6;
    }
    &:hover .sd-summary-state-marker svg {
      opacity: 1;
      transform: scale(1.1);
    }

  }

  // Hide the octicon added as a placeholder for when no title is provided,
  // but only when the summary is open
  &[open] summary .sd-octicon.no-title {
    visibility: hidden;
  }

  // setup how state marker changes on open/close of the dropdown
  .sd-summary-chevron-right {
    transition: 0.25s;
  }
  &[open] > .sd-summary-title .sd-summary-chevron-right {
    transform: rotate(90deg);
  }
  &[open] > .sd-summary-title .sd-summary-chevron-down {
    transform: rotate(180deg);
  }

  // Hide the card body border when not open
  &:not([open]).sd-card {
    border: none;
  }
  &:not([open]) > .sd-card-header {
    border: 1px solid var(--sd-color-card-border);
    border-radius: 0.25rem;
  }

  // Transition animation
  &.sd-fade-in[open] summary ~ * {
    -moz-animation: sd-fade-in 0.5s ease-in-out;
    -webkit-animation: sd-fade-in 0.5s ease-in-out;
    animation: sd-fade-in 0.5s ease-in-out;
  }

  &.sd-fade-in-slide-down[open] summary ~ * {
    -moz-animation: sd-fade-in 0.5s ease-in-out, sd-slide-down 0.5s ease-in-out;
    -webkit-animation: sd-fade-in 0.5s ease-in-out,
      sd-slide-down 0.5s ease-in-out;
    animation: sd-fade-in 0.5s ease-in-out, sd-slide-down 0.5s ease-in-out;
  }
}

.sd-col > .sd-dropdown {
  width: 100%;
}

.sd-summary-content > .sd-tab-set:first-child {
  margin-top: 0;
}

@keyframes sd-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes sd-slide-down {
  0% {
    transform: translate(0, -10px);
  }

  100% {
    transform: translate(0, 0);
  }
}
