@charset "UTF-8";

.stm-oc{
  position:fixed;
  z-index:var(--stm-offcanvas-z);
  inset:0;
  isolation:isolate;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--stm-transition-base),visibility var(--stm-transition-base);
}

.stm-oc.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.stm-oc__overlay{
  position:absolute;
  inset:0;
  border:0;
  background:var(--stm-color-overlay);
  cursor:pointer;
}

.stm-oc__panel{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:min(var(--stm-offcanvas-width),calc(100vw - var(--stm-offcanvas-panel-gutter)));
  display:flex;
  flex-direction:column;
  background:var(--stm-color-surface);
  color:var(--stm-color-heading);
  box-shadow:var(--stm-offcanvas-shadow);
  transform:translateX(-100%);
  transition:transform var(--stm-transition-base);
}

.stm-oc.is-open .stm-oc__panel{
  transform:translateX(0);
}

.stm-oc__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--stm-offcanvas-head-height);
  padding:var(--stm-raised-heading-padding-y) var(--stm-space-4);
  gap:var(--stm-space-3);
  border-bottom:1px solid var(--stm-raised-edge-line);
  background:var(--stm-raised-heading-bg);
  color:var(--stm-raised-heading-text);
  box-shadow:none;
}

.stm-oc__title{
  margin:0;
  color:var(--stm-raised-heading-text);
  font-size:var(--stm-offcanvas-title-size);
  letter-spacing:var(--stm-letter-tight);
  font-weight:var(--stm-weight-bold);
  line-height:1.2;
}

.stm-oc__close{
  display:grid;
  flex:0 0 var(--stm-offcanvas-close-size);
  width:var(--stm-offcanvas-close-size);
  height:var(--stm-offcanvas-close-size);
  aspect-ratio:1;
  place-items:center;
  margin:0;
  padding:0 0 2px;
  border:var(--stm-border-default);
  border-radius:50%;
  background:var(--stm-raised-control-bg);
  color:var(--stm-color-heading);
  font-size:var(--stm-offcanvas-close-font-size);
  line-height:1;
  cursor:pointer;
  transition:
    border-color var(--stm-transition-fast),
    background var(--stm-transition-fast),
    color var(--stm-transition-fast),
    transform var(--stm-transition-fast);
}

.stm-oc__close:hover{
  border-color:var(--stm-color-primary);
  background:var(--stm-raised-accent-bg);
  color:var(--stm-color-on-primary);
}

.stm-oc__close:active{
  transform:scale(.96);
}

.stm-oc__nav{
  min-height:0;
  flex:1;
  overflow:auto;
  padding:var(--stm-space-2) 0;
}

.stm-oc__menu,
.stm-oc__sub{
  margin:0;
  padding:0;
  list-style:none;
}

.stm-oc__item{
  border-bottom:var(--stm-divider-default);
}

.stm-oc__link,
.stm-oc__parent{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  min-height:var(--stm-offcanvas-item-height);
  padding-inline:var(--stm-space-5);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--stm-color-heading);
  font-size:var(--stm-offcanvas-item-font-size);
  font-weight:var(--stm-weight-semibold);
  line-height:var(--stm-offcanvas-item-line-height);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--stm-transition-fast),color var(--stm-transition-fast);
}

.stm-oc__link:hover,
.stm-oc__parent:hover,
.stm-oc__item.is-sub-open>.stm-oc__parent{
  background:var(--stm-offcanvas-parent-hover-bg);
  color:var(--stm-offcanvas-parent-hover-text);
}

.stm-oc__chev{
  position:relative;
  display:grid;
  flex:0 0 var(--stm-offcanvas-chevron-size);
  width:var(--stm-offcanvas-chevron-size);
  height:var(--stm-offcanvas-chevron-size);
  place-items:center;
  border:var(--stm-offcanvas-chevron-border-width) solid var(--stm-color-border);
  border-radius:var(--stm-radius-pill);
  background:var(--stm-color-surface-soft);
  color:var(--stm-color-heading);
}

.stm-oc__chev::before{
  content:"";
  width:var(--stm-offcanvas-chevron-glyph-size);
  height:var(--stm-offcanvas-chevron-glyph-size);
  border-right:var(--stm-offcanvas-chevron-glyph-stroke) solid currentColor;
  border-bottom:var(--stm-offcanvas-chevron-glyph-stroke) solid currentColor;
  transform:translateY(var(--stm-offcanvas-chevron-closed-y)) rotate(45deg);
  transition:transform var(--stm-transition-fast);
}

.stm-oc__item.is-sub-open>.stm-oc__parent .stm-oc__chev{
  border-color:var(--stm-offcanvas-chevron-open-border);
  background:transparent;
  color:var(--stm-offcanvas-parent-hover-text);
}

.stm-oc__item.is-sub-open>.stm-oc__parent .stm-oc__chev::before{
  transform:translateY(var(--stm-offcanvas-chevron-open-y)) rotate(225deg);
}

.stm-oc__sub{
  display:none;
  background:var(--stm-color-surface-soft);
}

.stm-oc__item.is-sub-open>.stm-oc__sub{
  display:block;
}

.stm-oc__sub .stm-oc__link,
.stm-oc__sub .stm-oc__parent{
  min-height:var(--stm-offcanvas-subitem-height);
  padding-left:calc(var(--stm-space-5) + var(--stm-space-4));
  color:var(--stm-color-heading);
  font-size:var(--stm-offcanvas-subitem-font-size);
  font-weight:var(--stm-weight-medium);
}

.stm-oc__sub .stm-oc__link:hover,
.stm-oc__sub .stm-oc__parent:hover,
.stm-oc__sub .stm-oc__item.is-sub-open>.stm-oc__parent{
  background:var(--stm-offcanvas-parent-hover-bg);
  color:var(--stm-offcanvas-parent-hover-text);
}

body.stm-oc-open{
  overflow:hidden;
}