////////// Customer Sidebar //////////
 
.sidebar.customer,
.header.customer .sidebar {
  background-color: $gray-900;
}

.sidebar.customer .navlink,
.sidebar.customer .navlink .icon,
.header.customer .sidebar .navlink,
.header.customer .sidebar .navlink .icon {
  color: $white;
}

.sidebar.customer summary:after,
.header.customer summary:after {
  background-color: $white;
}

.sidebar.customer .navlink.active,
.header.customer .navlink.active {
  color: $gray-900;
  background-color: $teal;
  & .icon {
    color: $gray-900;
  }
}

.sidebar.customer .navlink:hover,
.sidebar.customer .navlink:focus,
.sidebar.customer .navlink.active:focus,
.sidebar.customer .navlink.active:hover,
.header.customer .sidebar .navlink:hover,
.header.customer .sidebar .navlink:focus,
.header.customer .sidebar .navlink.active:focus,
.header.customer .sidebar .navlink.active:hover {
  color: $teal;
  background-color: $gray-800;
  & .icon {
    color: $teal;
  }
}

.sidebar.customer details[open],
.header.customer .sidebar details[open],
.header.customer .sidebar .header-dropdown[open] {
  background-color: $gray-800;
}

.sidebar.customer details summary.navlink:hover,
.sidebar.customer details summary.navlink:focus,
.header.customer .sidebar details summary.navlink:hover,
.header.customer .sidebar details summary.navlink:focus,
.sidebar.customer .sidebar-divider,
.header.customer .sidebar-divider,
.header.customer .sidebar .sidebar-divider,
.header.customer .header .sidebar-divider {
  background-color: $gray-800;
}

.sidebar.customer details .navlink,
.sidebar.customer details .navlink.active,
.header.customer .sidebar .navlink,
.header.customer .sidebar .navlink.active {
  &:hover, &:focus {
    color: $teal;
    background-color: $gray-700;
    .icon {
      color: $teal;
    }
    &:after {
      background-color: $teal;
    }
  }
}