/* #region Navigation Sidebar ---------------------------------------------- */

/* #region Nav-Section */

.ott-nav-section {
    width: 100%;
    margin-bottom: var(--style-padding-medium);
}
.ott-nav-section:first-of-type {
    margin-top: var(--style-padding-medium);
}

.ott-nav-section a,
.ott-nav-section .link {
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--style-text-primary);
    font-size: var(--font-size-paragraph);
    padding-left: var(--style-padding-small);
    overflow: hidden;
    text-align: left;
}
.ott-nav-section .link.secondary {
  color: var(--style-text-secondary);
}
.ott-nav-section .link.secondary:hover {
  color: var(--style-text-primary);
}
.ott-nav-section a span,
.ott-nav-section .link span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: block;
}

.ott-nav-section-title {
    font-size: var(--font-size-small);
}
.ott-nav-section:not(.collapsible) .ott-nav-section-title {
    padding-left: var(--style-padding-small);
}

/* #endregion */

/* #region Nav-Section-Children */

.ott-nav-section-children {
    font-size: var(--font-size-paragraph);
}
.ott-nav-section-children li {
    display: flex;
}
.ott-nav-section-children > * {
    width: 100%;
}
.ott-nav-section-children.section-collapsed {
    display: none;
}
.ott-nav-section-children li:last-of-type .ott-nav-sub-section {
    margin-bottom: 0;
}

.ott-nav-sub-section {
    width: 100%;
    margin-bottom: var(--style-padding-small);    
}

.ott-nav-sub-section-children {
    padding-left: var(--style-padding-medium);
    margin-top: var(--style-padding-tiny);
}

/* #endregion */

/* #region Nav-Section-Heading */

.ott-nav-section-heading {
    font-size: var(--font-size-paragraph);
    color: var(--style-text-tertiary);
    padding-left: 0;
}
.ott-nav-section-heading .ott-nav-button {
    width: 100%;
    justify-content: start;
    cursor: pointer;
}
.ott-nav-section-heading .ott-nav-button * {
  cursor: pointer;
}
.ott-nav-section-heading .ott-nav-section-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    padding-left: var(--style-padding-tiny);
}
header > .ott-nav-section-title {
  margin-bottom: var(--style-padding-tiny);
  display: block;
}

.ott-nav-section-heading svg {
    fill: var(--style-text-tertiary);
}

/* #endregion */

/* #region Nav-Expander */

.ott-nav-section-expander {
    transform: translateY(-1px) rotateZ(90deg);
    transition-duration: var(--anim-duration-short);
}
.ott-nav-section-expander.section-open {
    transform: translateY(-1px) rotateZ(180deg);
}

/* #endregion */

/* #region Nav-Button */

.ott-nav-button {
    display: flex;
    height: auto;
    flex-grow: 1;
    flex-shrink: 1;

    justify-content: space-between;
    align-items: center;
    gap: var(--style-padding-tiny);
    color: inherit;
    background-color: transparent;
    padding: var(--style-padding-tiny);
    border-radius: var(--style-border-radius);
    margin-bottom: 1.5px;
}
.ott-nav-button.disabled {
  cursor: default;
  color: var(--style-text-quarternary);
}
.ott-nav-button.disabled .icon-stroke {
  stroke: var(--style-text-quarternary);
}
.ott-nav-button.disabled .icon-fill {
  fill: var(--style-text-quarternary);
}

.ott-nav-button:not(.disabled):hover {
    background-color: var(--style-background-accent-thin);
}
.ott-nav-button.active {
    background-color: var(--style-background-accent-regular);
}
.ott-nav-button-leading {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: var(--style-padding-small)
}
.ott-nav-button .icon {
  display: flex;
  align-items: center;
  color: var(--style-text-tertiary) !important;
}
.ott-nav-button.active .icon,
.ott-nav-button:hover .icon {
  color: var(--style-text-primary) !important;
}
.ott-nav-button-trailing {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ott-nav-badge-red {
  background-color: var(--color-red);
  color: #fff;
  padding: 0 5px;
  height: 16px;
  display: flex;
  align-items: center;
  border-radius: var(--style-border-radius);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* #endregion */



.float-nav-backround {
  max-height: 100%;
  height: 100%;
}

.ott-sidebar-padding {
  width: var(--style-padding-small);
}

.ott-sidebar-nav.float-nav {
  position: fixed;
  top: calc(var(--icon-size-xxlarge) + var(--style-padding-small));
  bottom: var(--style-padding-large);
  border-radius: var(--style-border-radius);
  border: var(--border-regular);
  background-color: var(--style-background-secondary);
  overflow: hidden;
}

.ott-sidebar-nav .nav-content {
  
  display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 0;
    height: 100%;
    max-height: 100%;
}


.ott-sidebar-nav.float-nav .ott-nav-content {
  padding-top: var(--style-padding-tiny);
  background-color: var(--style-background-secondary);
}

.ott-sidebar-nav {
  transition-property: width;
  transition-duration: var(--anim-duration-medium);
}

/* #endregion */

/* #region Sidebar Size */



.ott-sidebar .ott-nav-root {
  display: flex;
  flex-direction: column;
}
.ott-sidebar .ott-nav-root .ott-nav-container {
  position: relative;
  flex-grow: 1;
}



/* #endregion */

/* #region Sidebar Drag */

.ott-nav-resize {
  position: absolute;
  width: 6px;
  max-height: 100%;
  top: calc(var(--style-padding-small) + var(--style-border-radius));
  bottom: calc(var(--style-padding-small) + var(--style-border-radius));
  right: -4px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  cursor: col-resize;
}

.ott-nav-resize::after {
  content: '';
  background-color: transparent;
  display: block;
  width: 100%;
  height: 100%;
  left: 1.5px;
  width: 2px;
  border-radius: 1px;
  position: absolute;
  transition-duration: var(--anim-duration-short);
  transition-delay: 0s;
}

.ott-nav-resize:hover::after {
  background-color: var(--style-background-accent-ultrathick);
  transition-delay: var(--anim-duration-short);
}
/* #endregion */

/* #endregion */


/* #region Navigation Sidebar */

/* #region Positioning */

.mnav-side-cont {
    position: fixed;
    transition: 
        left var(--anim-duration-medium) var(--anim-duration-ultrashort), 
        top var(--anim-duration-medium) var(--anim-duration-ultrashort), 
        bottom var(--anim-duration-medium) var(--anim-duration-ultrashort),
        display var(--anim-duration-medium) var(--anim-duration-ultrashort),
        content-visibility var(--anim-duration-medium) var(--anim-duration-ultrashort);
    transition-duration: var(--anim-duration-medium);
    z-index: 10;
}
.mnav-side-cont.locked {
    top: 0px;
    bottom: 0px;
    left: 0px;
}
.mnav-side-cont.floating {
    top: calc(var(--style-padding-xxxlarge) + var(--style-padding-small));
    bottom: var(--style-padding-large);
    left: var(--style-padding-large);
}
.mnav-side-cont.hidden {
    top: calc(var(--style-padding-xxxlarge) + var(--style-padding-small));
    bottom: var(--style-padding-large);
    left: -300px;
}
.mnav-side-cont::before {
    z-index: -1;
    content: '';
    pointer-events: none;
    display: none;
    transition-behavior: allow-discrete;
    transition-duration: var(--anim-duration-medium); 
    transition-property: background-color, opacity, display, content-visibility;
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.35);
}
.light-mode .mnav-side-cont::before  {
    background-color: rgba(0, 0, 0, 0.15);
}
.mnav-side-cont.floating::before {
    display: block;
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
}

.mnav-side-hov {
    background-color: transparent;
    right: -8px;
    left: -80px;
    top: -8px;
    bottom: -40px;
    position: absolute;
    display: block;
    z-index: -1;
}
.resz.resizing .mnav-side-hov {
    right: -1800px;
}

.mnav-side-pad.locked {
    margin-right: calc(var(--style-padding-small) * -1);
}
/* For use in over anywhere on sidebar */
/* .resz.hidden .mnav-side-hov {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: unset;
    width: 8px;
} */

/* #endregion */

/* #region Styling */

.mnav-side-cont .nav-content {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 0;
    height: 100%;
    max-height: 100%;
    border-radius: var(--style-border-radius);
    transition: background-color var(--anim-duration-medium);
    background-color: var(--color-back-1);
}

.mnav-side-cont.floating .nav-content,
.mnav-side-cont.hidden .nav-content {    
    background-color: var(--style-background-primary);
    border: var(--border-regular);
}
.light-mode .mnav-side-cont.floating .nav-content,
.light-mode .mnav-side-cont.hidden .nav-content {    
    background-color: var(--color-back-1);
}
.light-mode .mnav-side-cont.floating .nav-content,
.light-mode .mnav-side-cont.hidden .nav-content {
    box-shadow: 
    rgba(0, 0, 0, .1) 0px 3px 32px, 
  rgba(0, 0, 0, .08) 0px 4px 24px, 
  rgba(0, 0, 0, .07) 0px 3px 10px, 
  rgba(0, 0, 0, .05) 0px 2px 6px, 
  rgba(0, 0, 0, .04) 0px 1px 2px;
}

/* #endregion */

/* #region Sidebar Button */

.mstr-nv-toggle-wrap {
    display: flex;
    position: relative;
}
.mstr-nv-toggle-wrap::before {
    display: block;
    content: '';
    position: absolute;
    left: -80px;
    top: 0;
    right: 0;
    bottom: -22px;
}
.mstr-nv-toggle-wrap .mstr-nv-hvr {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -14px;
    right: 0px;
    background-color: transparent;
}
.sidebar-button svg * {
    transition: var(--anim-duration-short);
}


.sidebar-button.left {
    margin-right: var(--style-padding-small);
}

.sidebar-button.right {
    margin-left: var(--style-padding-small);
}

/* #endregion */


/* #endregion */