details.dropdown {
  position: relative;

  &.fix-height {
    height: max-content;
  }

  summary {
    list-style: none;
    &::before,
    &::marker {
      display: none;
      list-style: none;
    }
  }

  .dropdown-content {
    position: absolute;
    top: 100%;
    z-index: 1000;
    min-width: 160px;
    max-width: 400px;
    padding: 4px 0;
    margin-top: 2px;
    list-style: none;
    background: white;
    border: 1px $gray-lighter solid;
    border-radius: 0.25rem;
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);

    &::before,
    &::after {
      position: absolute;
      display: inline-block;
      content: " ";
    }

    &::before {
      border: 8px solid transparent;
      border-bottom-color: rgba(27, 31, 35, 0.15);
    }
    &::after {
      border: 7px solid transparent;
      border-bottom-color: white;
    }

    .dropdown-item {
      display: block;
      padding: 4px 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dropdown-divider {
      display: block;
      height: 0;
      margin: 8px 0;
      border-top: 1px #e1e4e8 solid;
    }
  }
  .dropdown-content.dropdown-front {
    z-index: 1000;
  }
}
.dropdown-content-w {
  top: 0;
  right: 100%;
  left: auto;
  width: auto;
  margin-top: 0;
  margin-right: 8px;
}
.dropdown-content-w::before {
  top: 10px;
  right: -16px;
  left: auto;
  border-color: transparent;
  border-left-color: rgba(27, 31, 35, 0.15);
}
.dropdown-content-w::after {
  top: 11px;
  right: -14px;
  left: auto;
  border-color: transparent;
  border-left-color: #fff;
}
.dropdown-content-e {
  top: 0;
  left: 100%;
  width: auto;
  margin-top: 0;
  margin-left: 8px;
}
.dropdown-content-e::before {
  top: 8px;
  left: -16px;
  border-color: transparent;
  border-right-color: rgba(27, 31, 35, 0.15);
}
.dropdown-content-e::after {
  top: 11px;
  left: -14px;
  border-color: transparent;
  border-right-color: #fff;
}
.dropdown-content-ne {
  top: auto;
  bottom: 100%;
  left: 0;
  margin-bottom: 3px;
}
.dropdown-content-ne::before,
.dropdown-content-ne::after {
  top: auto;
  right: auto;
}
.dropdown-content-ne::before {
  bottom: -8px;
  left: 9px;
  border-top: 8px solid rgba(27, 31, 35, 0.15);
  border-right: 8px solid transparent;
  border-bottom: 0;
  border-left: 8px solid transparent;
}
.dropdown-content-ne::after {
  bottom: -7px;
  left: 10px;
  border-top: 7px solid #fff;
  border-right: 7px solid transparent;
  border-bottom: 0;
  border-left: 7px solid transparent;
}
.dropdown-content-s {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}
.dropdown-content-s::before {
  top: -16px;
  right: 50%;
  transform: translateX(50%);
}
.dropdown-content-s::after {
  top: -14px;
  right: 50%;
  transform: translateX(50%);
}
.dropdown-content-sw {
  right: 0;
  left: auto;
}
.dropdown-content-sw::before {
  top: -16px;
  right: 9px;
  left: auto;
}
.dropdown-content-sw::after {
  top: -14px;
  right: 10px;
  left: auto;
}
.dropdown-content-se::before {
  top: -16px;
  left: 9px;
}
.dropdown-content-se::after {
  top: -14px;
  left: 10px;
}
