.details-dropdown { display: inline-block; position: relative; } /* Hide The disclosure widget: */ .details-dropdown summary { list-style: none; cursor: pointer; } .details-dropdown[open] summary { list-style: none; cursor: pointer; i { color: var(--bs-body-color) } /* border-left: solid 1px $secondary; */ /* border-top: solid 1px $secondary; */ /* border-right: solid 1px $secondary; */ } .details-dropdown[open] { background-color: $secondary; } /* Detache details content */ .details-dropdown .details-dropdown-content { border: solid 1px $secondary; position: absolute; min-inline-size: max-content; z-index: 2000; /* In case the details-dropdown should open to the left: */ right: 0; } /* Closing the details-dropdown on clicking anywhere else */ .details-dropdown[open] summary::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; content: ""; cursor: default; } /* Visual styles for your details-dropdown: */ .details-dropdown .details-dropdown-trigger { /* your look and feel here */ } .details-dropdown .details-dropdown-content { /* your look and feel here */ } form.no-padding { button { padding: 0; } } li.list-group-item-danger:hover { button { color: var(--bs-body-color) ; } }