/*--------------------------------------------------------------
/*		Reset
/*  --------------------------------------------------------------

.side-menu,
.side-menu *
  list-style: none
  margin: 0
  padding: 0
  border: 0
  outline: none
  text-decoration: none
  line-height: 1

/*--------------------------------------------------------------
/*		Root
/*  --------------------------------------------------------------

.side-menu
  --sm-z-index: 9999
  --sm-offset: 0px
  --sm-color: #ffffff
  --sm-icon-color: #ffffff
  --sm-extra-text-color: #ffffff
  --sm-background: #128be0
  --sm-hover-background: #128be0
  --sm-item-height: 40px
  --sm-icon-width: 40px
  --sm-icon-size: 24px
  --sm-label-size: 16px
  --sm-label-font: inherit
  --sm-label-font-style: normal
  --sm-label-font-weight: normal
  --sm-border-width: 0px
  --sm-border-color: rgba(0, 0, 0, 0.75)
  --sm-radius-top: 0px
  --sm-radius-bottom: 0px
  --sm-button-space: 2px
  --sm-extra-text-width: 270px
  --sm-extra-fontsize: 16px

/*--------------------------------------------------------------
/*		Main
/*  --------------------------------------------------------------

.side-menu
  position: fixed
  z-index: var(--sm-z-index)
  @media print
    display: none

  &.is-hidden
    //display: none
    &.is-left
      left: calc((var(--sm-icon-width) + 10px) * -1)

    &.is-right
      right: calc((var(--sm-icon-width) + 10px) * -1)

  .sm-list
    display: flex
    flex-direction: column
    gap: var(--sm-button-space)

  .sm-item
    position: relative
    transition: transform 0.4s, opacity 0.4s linear

    &:has(> .sm-link:focus) > .sm-link,
    &:hover > .sm-link
      background-color: var(--sm-hover-background)

  .sm-link
    display: flex
    height: var(--sm-item-height)
    align-items: center
    color: var(--sm-color)
    background-color: var(--sm-background)
    cursor: pointer
    transition: background-color 0.2s linear


  .sm-icon
    width: var(--sm-icon-width)
    color: var(--sm-icon-color)
    font-size: var(--sm-icon-size)
    text-align: center

    img
      width: var(--sm-icon-size)

    &.is-hidden
      display: none

  .sm-label
    padding: 0 10px
    font-size: var(--sm-label-size)
    font-family: var(--sm-label-font)
    font-style: var(--sm-label-font-style)
    font-weight: var(--sm-label-font-weight)

  .sm-input
    box-sizing: border-box
    background-color: #fff
    height: calc(var(--sm-item-height) - 2px)
    padding-left: 5px
    padding-right: 5px

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration
      display: none

/*--------------------------------------------------------------
/*		Appearance
/*  --------------------------------------------------------------

.side-menu
  &.sm-connected
    .sm-list
      border-width: var(--sm-border-width) var(--sm-border-width) var(--sm-border-width) 0
      border-style: solid
      border-color: var(--sm-border-color)

    &.has-shadow
      .sm-list
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5)

  &:not(.sm-connected)
    .sm-list .sm-item .sm-link
      border-width: var(--sm-border-width) var(--sm-border-width) var(--sm-border-width) 0
      border-style: solid
      border-color: var(--sm-border-color)

    &.has-shadow
      .sm-list .sm-item .sm-link
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5)

/*--------------------------------------------------------------
/*		Position Left
/*  --------------------------------------------------------------

.side-menu.is-left
  left: 0
  transform: translateX(-100%) translateX(var(--sm-icon-width))
  transition: left .4s ease-in-out

  &.-top
    top: 0
    margin-top: var(--sm-offset)

  &.-center
    top: 50%
    margin-top: var(--sm-offset)
    transform: translateY(-50%) translateX(-100%) translateX(var(--sm-icon-width))

  &.-bottom
    bottom: 0
    margin-bottom: var(--sm-offset)

  /* Default */


  &:not(.sm-connected)
    .sm-item
      align-self: end

      .sm-link
        flex-direction: row-reverse
        border-top-right-radius: var(--sm-radius-top)
        border-bottom-right-radius: var(--sm-radius-bottom)

      &.sm-open,
      &:has(.sm-link:focus),
      &:hover
        transform: translateX(100%) translateX(calc(var(--sm-icon-width) * -1))

        .sm-icon.is-hidden
          display: block

        .sm-icon.is-visible
          display: none


  /* Connected */



  &.sm-connected
    transition: transform 0.4s linear

    > .sm-list
      border-top-right-radius: var(--sm-radius-top)
      border-bottom-right-radius: var(--sm-radius-bottom)

      > .sm-item:first-child .sm-link
        border-top-right-radius: var(--sm-radius-top)

      > .sm-item:last-child .sm-link
        border-bottom-right-radius: var(--sm-radius-bottom)

    > .sm-list > .sm-item > .sm-link
      flex-direction: row-reverse

    &.sm-open,
    &:has(.sm-link:focus),
    &:hover
      transform: translateY(-50%) translateX(0)

      .sm-icon.is-hidden
        display: block

      .sm-icon.is-visible
        display: none


/*--------------------------------------------------------------
/*		Position Right
/*  --------------------------------------------------------------

.side-menu.is-right
  right: 0
  margin-top: var(--sm-offset)
  transform: translateX(100%) translateX(calc(var(--sm-icon-width) * -1))
  transition: right .4s ease-in-out

  &.-top
    top: 0

  &.-center
    top: 50%
    margin-top: var(--sm-offset)
    transform: translateY(-50%) translateX(100%) translateX(calc(var(--sm-icon-width) * -1))

  &.-bottom
    bottom: 0
    margin-bottom: var(--sm-offset)

  /* Default */

  &:not(.sm-connected)
    .sm-item
      align-self: start

      .sm-link
        border-width: var(--sm-border-width) 0 var(--sm-border-width) var(--sm-border-width)
        border-top-left-radius: var(--sm-radius-top)
        border-bottom-left-radius: var(--sm-radius-bottom)

      &.sm-open,
      &:has(.sm-link:focus),
      &:hover
        transform: translateX(-100%) translateX(calc(var(--sm-icon-width)))

  /* Connected */

  &.sm-connected
    transition: transform 0.4s linear

    > .sm-list
      border-width: var(--sm-border-width) 0 var(--sm-border-width) var(--sm-border-width)
      border-top-left-radius: var(--sm-radius-top)
      border-bottom-left-radius: var(--sm-radius-bottom)

      > .sm-item:first-child .sm-link
        border-top-left-radius: var(--sm-radius-top)

      > .sm-item:last-child .sm-link
        border-bottom-left-radius: var(--sm-radius-bottom)

    &.sm-open,
    &:has(.sm-link:focus),
    &:hover
      transform: translateY(-50%) translateX(0)

/*--------------------------------------------------------------
/*		Extra Text
/*  --------------------------------------------------------------

.sm-item.has-text
  &:focus,
  &:hover
    z-index: 9

.sm-extra-text *
  color: var(--sm-color)

.sm-extra-text
  box-sizing: border-box
  position: absolute
  top: var(--sm-item-height)
  width: var(--sm-extra-text-width)
  padding: 15px
  font-size: var(--sm-extra-fontsize)
  background-color: var(--sm-hover-background)
  opacity: 0
  visibility: hidden
  transition: opacity 0.4s, visibility 0.4s linear

  p + p
    margin-top: 15px

  ul
    list-style: disc
    padding-left: 10px
    margin: 15px 0 15px 15px

    li
      list-style: disc

  a
    color: inherit
    text-decoration: underline


.sm-extra-text + .sm-link
  width: var(--sm-extra-text-width)

.sm-item.sm-open,
.sm-item:has(.sm-link:focus),
.sm-item:focus
  z-index: 11

  .sm-extra-text
    opacity: 1
    visibility: visible


/*--------------------------------------------------------------
/*		Sub Menu
/*  --------------------------------------------------------------

.side-menu

  .sm-has-submenu
    position: relative

    &.sm-open,
    &:has(.sm-link:focus),
    &:hover
      z-index: 9

      .sm-sub-menu
        visibility: visible
        opacity: 1

  &.has-shadow
    .sm-has-submenu .sm-sub-link
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5)

  &:not(.sm-connected)
    .sm-sub-menu

      padding-top: var(--sm-button-space)

  &.sm-connected
    .sm-sub-menu
      top: 0


  .sm-sub-menu
    display: flex
    gap: var(--sm-button-space)
    flex-direction: column
    position: absolute
    visibility: hidden
    opacity: 0
    width: max-content
    transition: visibility 0.3s, opacity 0.3s linear

    .sm-item
      transform: none !important

      &:focus,
      &:hover
        transform: none !important


/*--------------------------------------------------------------
/*		Sub Menu position
/*  --------------------------------------------------------------

.side-menu.is-left

  .sm-sub-label
    left: -999999px

  .sm-sub-link:focus .sm-sub-label,
  .sm-sub-link:hover .sm-sub-label
    left: var(--sm-icon-width)

  &:not(.sm-connected)
    .sm-sub-menu
      right: 0

  &.sm-connected
    .sm-sub-menu
      left: calc(100% + var(--sm-border-width))
      padding-left: var(--sm-button-space)


.side-menu.is-right
  .sm-sub-label
    right: -999999px

  .sm-sub-link:focus .sm-sub-label,
  .sm-sub-link:hover .sm-sub-label
    right: var(--sm-icon-width)

  &:not(.sm-connected)
    .sm-sub-menu
      left: 0

  &.sm-connected
    .sm-sub-menu
      right: calc(100% + var(--sm-border-width))
      padding-right: var(--sm-button-space)