:root {
--mmx-bg:#fff;
--mmx-rail-bg:transparent;
--mmx-rail-color:#2c2c2c;
--mmx-rail-hover:#111;
--mmx-rail-active:#0e6efd;
--mmx-indicator:#0e6efd;
--mmx-border:#eef0f3;
--mmx-grid-gap:16px;
--mmx-icon-size:24px
}

.mmx {
background:var(--mmx-bg);
border:1px solid var(--mmx-border);
border-radius:14px;
box-shadow:0 10px 30px #0000000f;
overflow:hidden
}

.mmx__inner {
display:flex;
gap:0;
min-height:320px
}

.mmx__rail {
flex:0 0 30%;
min-inline-size:220px;
background:var(--mmx-rail-bg);
padding:16px;
border-inline-end:1px solid var(--mmx-border);
display:flex;
flex-direction:column;
gap:8px
}

.mmx__rail-item {
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:10px;
cursor:pointer;
outline:none;
color:var(--mmx-rail-color)
}

.mmx__rail-item:after {
content:"";
position:absolute;
inset-inline-start:0;
inset-block-start:50%;
transform:translateY(-50%);
inline-size:3px;
block-size:0;
background:var(--mmx-indicator);
border-radius:2px;
transition:block-size .3s ease
}

.mmx__rail-item:hover {
color:var(--mmx-rail-hover)
}

.mmx__rail-item:hover:after {
block-size:40%
}

.mmx__rail-item:focus-visible {
box-shadow:0 0 0 2px #0e6efd59
}

.mmx__rail-item--active {
color:var(--mmx-rail-active);
background:#0e6efd14
}

.mmx__rail-icon svg {
inline-size:20px;
block-size:20px
}

.mmx__rail-texts {
display:flex;
flex-direction:column;
line-height:1.25
}

.mmx__rail-label {
display:block;
font-weight:700
}

.mmx__rail-desc {
display:block;
font-size:.92em;
color:#637083;
margin-top:2px
}

.mmx__panel {
flex:1 1 auto;
padding:16px;
background:#fff
}

.mmx__panel-item[hidden] {
display:none!important
}

/* Accordion Mode Styles */
.mmx--accordion .mmx__inner {
flex-direction:column;
min-height:auto!important
}

.mmx--accordion .mmx__accordion {
display:flex;
flex-direction:column;
width:100%
}

.mmx--accordion .mmx__accordion-item {
display:flex;
flex-direction:column;
}

.mmx--accordion .mmx__accordion-item:last-child {
border-bottom:none
}

.mmx--accordion .mmx__rail-item {
width:100%;
border-radius:0;
padding:16px;
cursor:pointer;
transition:background-color .2s ease,color .2s ease
}

.mmx--accordion .mmx__rail-item:after {
display:none
}

.mmx--accordion .mmx__rail-item:hover:after {
display:none
}

.mmx--accordion .mmx__panel-item {
max-height:0;
overflow:hidden;
padding:0 16px;
transition:max-height .4s cubic-bezier(0.4, 0, 0.2, 1),padding .4s cubic-bezier(0.4, 0, 0.2, 1);
border-top:none
}

.mmx--accordion .mmx__panel-item[hidden] {
max-height:0!important;
padding-top:0!important;
padding-bottom:0!important;
border-top:none
}

.mmx--accordion .mmx__panel-item:not([hidden]) {
max-height:5000px;
padding-top:20px;
padding-bottom:20px;
}

.mmx--accordion .mmx__rail-item--active {
background:var(--mmx-rail-bg);
color:var(--mmx-rail-active)
}

.mmx--accordion .mmx__rail-caret {
display:flex;
align-items:center;
justify-content:center;
margin-inline-start:auto;
flex-shrink:0;
transition:transform .3s ease
}

.mmx--accordion .mmx__rail-caret svg {
inline-size:20px;
block-size:20px;
display:block
}

.mmx--accordion .mmx__rail-item {
justify-content:space-between;
gap:16px
}

.mmx--accordion .mmx__rail-texts {
flex:1;
min-inline-size:0
}

.mmx--accordion .mmx__rail-item--active .mmx__rail-caret {
transform:rotate(180deg)
}

@media (max-width:767px) {
.mmx__inner {
flex-direction:column
}

.mmx__rail {
flex:0 0 auto;
display:flex;
flex-direction:row;
overflow:auto;
gap:8px;
padding-block:10px;
border-inline-end:none;
border-block-end:1px solid var(--mmx-border)
}

.mmx__rail-item {
white-space:nowrap
}

.mmx__rail-item--active:before {
inset-inline-start:auto;
inset-inline-end:0;
inset-block:auto;
block-size:3px;
inline-size:100%;
bottom:-1px;
border-radius:0
}
}

html[dir="rtl"] .mmx__rail {
border-inline-start:1px solid var(--mmx-border);
border-inline-end:none
}

html[dir="rtl"] .mmx__rail-item:after {
inset-inline-start:0;
inset-inline-end:auto
}