@use 'sass:map';
@use 'sass:color';


@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;


#{getClassName((menu))} {
  margin: 0px;
  padding: 0px;
  width: #{getValName((menu, collapse, width))};
  &.is-collapse {
    #{getClassName((menu, item))}, #{getClassName((menu, items))} {
      overflow: hidden;
      justify-content: center;
      .bd {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      > .hd + .bd {
        display: none;
      }
    }
    #{getClassName((menu, items))} + dd {
      display: none;
    }
    #{getClassName((menu, group, level, 1))} {
      #{getClassName((menu, items, icon))} {
        display:none;
      }
    }
  }
}

#{getClassName((menu, group))} {
  margin: 0;
  dt {
    padding-left: calc(#{getValName((menu, level))} * #{getValName((menu, gap))});
    font-size: 12px;opacity: .4; line-height: 1.4em;
    
    &:empty {
      display: none;
    }
  }
  dd {
    margin: 0;
    cursor: pointer;
  }
  #{getClassName((menu, item))}, #{getClassName((menu, items))} {
    margin: 0px;
    padding: #{getValName((menu, padding))};
    padding-left: calc(#{getValName((menu, level))} * #{getValName((menu, gap))});
    width: 100%;
    list-style: none;
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
    line-height: 1.2em;
    color: #{getValName((menu, color))};
    background-color: #{getValName((menu, background-color))};
    &:hover {
      background-color: #{getValName((menu, item, hover, background-color))};
    }
    > .hd {
      padding-right: #{getValName((menu, gap))};
      // i {margin-right: var(--os-space-s);}
      + .bd {
        padding-left: 0;
      }
    }
    > .bd {
      padding-left: #{getValName((menu, gap))};
      flex: 1;
      &:empty {
        display: none;
      }
    }
    > .ft {
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      #{getClassName((menu, items, icon))} {
        margin: 0 #{getValName((space, xs))};
        font-size: 12px;
        opacity: .6;
      }
    }
  }
  #{getClassName((menu, item))} {
    &.is-active {
      color: #{getValName((menu, active, color))};
      background-color: #{getValName((menu, active, background-color))};
    }
  }
}

#{getClassName((menu, layout, horizontal))} {
  display: flex;
  overflow: hidden;
  #{getClassName((menu, item))}, #{getClassName((menu, items))} {
    white-space: nowrap;
  }
}
#{getClassName((menu, layout, vertical))}.is-collapse,
#{getClassName((menu, layout, horizontal))},
#{getClassName((menu, card))} {
  #{getClassName((menu, item))}, #{getClassName((menu, items))} {
    &.is-active {
      color: #{getValName((menu, active, color))};
      background-color: #{getValName((menu, active, background-color))};
    }
  }
}
#{getClassName((menu, layout, vertical))} {
  &.is-collapse {
    #{getClassName((menu, item))}, #{getClassName((menu, items))} {
      > .hd {
        padding-right: 0px;
      }
    }
  }
}

#{getClassName((menu))} {
  #{joinValName((menu, item, hover, background-color))}: rgba(map.get($colors, 'primary', 'base'), 0.1);
  // #{joinValName((menu, active, hover, background-color))}: #{getValName((menu, item, hover, background-color))};
  @include set-css-val(
    menu,
    (
      'color': (color, neutral, 9),
      'active-color': (color, primary),
      'font-size': (heading8),
      'padding': (space, s),
      'gap': (space, s)
    )
  )
}

#{getClassName((menu, large))} {
  @include set-css-val(
    menu,
    (
      'font-size': (heading7),
      'gap': (space, base)
    )
  )
}

#{getClassName((menu, mini))} {
  @include set-css-val(
    menu,
    (
      'font-size': (heading9),
      'gap': (space, xs)
    )
  )
}
#{getClassName((menu, card))} {
  @include set-popper-card();
  min-width: 200px;
  overflow: visible;
  #{getClassName((menu, items))} {
    + dd {
      @include set-popper-card();
      min-width: 200px;
      overflow: visible;
    }
  }
  #{getClassName((menu, items))},
  #{getClassName((menu, item))} {
    padding-left:#{getValName((menu, gap))}; 
  }
}
// .tip-fade-enter-from, .tip-fade-leave-to {
//   opacity: 0;
// }

.os-menu-icon-text {
  font-style: normal;
  &:after {
    content: var(--os-menu-icon-content);
    display: inline-block;
  }
}