@import "../colors.css";
@import "../media.css";
@import "../typography.css";
@import "./properties.css";
@import "./sidebar-header.css";
@import "./sidebar-content.css";
@import "./sidebar-link.css";

.sidebar,
.sidebar * {
  box-sizing: border-box;
}

.sidebar {
  background-color: var(--sidebar-background-color);
  display: block;
  font-family: var(--sidebar-font-family);
  min-height: 100vh;
  user-select: var(--sidebar-user-select);

  & > div {
    display: flex;
    flex: 1;
    width: 100%;
  }
}

.sidebar nav {
  flex: 1;
}

.menu,
.submenu {
  padding: 0;
  position: relative;
  margin: 0;
}

.expanded {
  min-width: var(--sidebar-expanded-min-width);
  position: var(--sidebar-position);
  transition: var(--sidebar-transition);
  width: var(--sidebar-expanded-width);
}