/*Common classes for HTMX - transition animations etc*/
@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(90px); }
}

@keyframes slide-to-left {
    to { transform: translateX(-90px); }
}

.card.hx-swap-container:not(:nth-last-of-type(1)) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card.hx-swap-container ~ .card.hx-swap-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.file-details {
    background-color:#ffffff;
    padding: 1rem;
    border:1px solid rgba(0,0,0,0.05);
    border-radius:2px;
}

.list-group-item.htmx-request {
    background-color:#ffffff !important;
}

.list-group-item.htmx-request::after {
    content:'';
    position:absolute;
    height:100%;
    width:100px;
    background-color:#ffffff;
    right:-100px;
    top:0;
}


.list-group-item {
    transition: all 0.2s;
}
.list-group-item.expanded {
    margin: 0.5rem -0.5rem;
    border-top: 1px solid !important;
    border-color: var(--primary) !important;
    border-radius: 0.5rem;
}


.list-group-item-header {
    background: white;
    /* border-bottom: 1px solid; */
    box-shadow: var(--bs-box-shadow-sm);
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    z-index: 1000;
}
.list-group-item-header.sticky-top {
    z-index: 1010;
}

/*Ensures that buttons are clickable within a stretched-link list item*/
.list-group-item .btn {
    position:relative;
    z-index:1;
}

.w-fixed-member-navigation .list-group-item-header.sticky-top {
    top:56px;
}

/*TODO: Reuse outside of HTMXForm scope*/
.htmx_form_container .btn-toolbar {
    background: white;
    box-shadow: var(--bs-box-shadow-lg);
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: -0.5rem;
    padding: 0.5rem 1rem;
    position: sticky;
    bottom: 0;
    border-radius: 0 0 0.5rem 0.5rem;
}
.list-group-item .htmx_form_container .btn-toolbar {
    margin-bottom: -0.5rem;
}
.card .htmx_form_container .btn-toolbar,
.modal .htmx_form_container .btn-toolbar {
    margin-bottom: -1rem;
}


/*forms*/
.htmx-request.loaded-content {
    display: none;
}
form.htmx-request.loaded-content {
    display:block;
    opacity:0.5;
    position:relative;
}

form.htmx-request.loaded-content::after {
    content: url('loadericon-large.svg');
    width:40px;
    height:20px;
    position:absolute;
    left:calc(50% - 20px);
    top: calc(50% - 10px);
}


/*form actions*/
.btn.htmx-request {
    position:relative;
    color:transparent !important;
}
.btn.htmx-request>* {
    visibility:hidden;
}
.btn.htmx-request::after {
    content: url('loadericon.svg');
    width:20px;
    height:8px;
    position:absolute;
    left:calc(50% - 10px);
    top: 8px;
}

/*Hacky removal of header inadvertently rendered*/
.modal .htmx_container .list-group-item-header {
    display:none !important;
}


/*Indicators*/

.htmx-indicator {
    visibility:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.htmx-indicator.htmx-request {
    visibility:visible;
}