lifegadget/ui-list

/* NAV STYLING OVERLAY */
.ui-list.item.skin-tab {
    border-radius: 0px;
    border: none;
    margin: 0px 0px 0px 0px;
}

/* RIGHT */
.ui-list.list-container.right.skin-tab {
  border-left: 3px solid #3F3F3F;
}
.ui-list.list-container.right .ui-list.item.skin-tab {
  transition: 0.25s;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 90%);
  border-left: 0px;
  width: calc(100% - 15px);
  background-color: hsl(0, 0%, 96%);
  font-weight: 500;
}
.ui-list.list-container.right .ui-list.item.skin-tab.selected {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 75%);
  border-left: 0px;
  background-color: hsl(0, 0%, 91%);
  width: 100%;
  font-weight: 900;
}
.ui-list.list-container.right .ui-list.item.skin-tab:hover {
  background-color: hsl(0, 0%, 91%);
}

/* LEFT */
.ui-list.list-container.left.skin-tab {
  border-right: 3px solid #3F3F3F;
}
.ui-list.list-container.left .ui-list.item.skin-tab {
  transition: 0.25s;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid hsl(0, 0%, 90%);
  border-right: 0px;
  width: calc(100% - 15px);
  background-color: hsl(0, 0%, 96%);
  font-weight: 500;
  align-self: flex-end;
}
.ui-list.list-container.left .ui-list.item.skin-tab.selected {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid hsl(0, 0%, 75%);
  border-right: 0px;
  background-color: hsl(0, 0%, 91%);
  width: 100%;
  font-weight: 900;
}
.ui-list.list-container.left .ui-list.item.skin-tab:hover {
  background-color: hsl(0, 0%, 91%);
}

/* TOP */
.ui-list.list-container.top .ui-list.item.skin-tab {
  border-bottom: 5px solid rgba(234, 234, 234, 0.78);
  justify-content: space-around;
}
.ui-list.list-container.top.skin-tab {
  border-bottom: 1px solid hsl(0, 0%, 90%);
}
.ui-list.list-container.top .ui-list.item.skin-tab {
  transition: 0.25s;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 96%);
  height: 100%;
  font-weight: 500;
  align-self: flex-end;
  position: relative;
  bottom: -1px;
}
.ui-list.list-container.top .ui-list.item.skin-tab.selected {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 75%);
  border-bottom: 1px solid hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 91%);
  font-weight: 900;
  align-self: flex-end;
}

/* BOTTOM */
.ui-list.list-container.bottom .ui-list.item.skin-tab {
  border-bottom: 5px solid rgba(234, 234, 234, 0.78);
  justify-content: space-around;
}
.ui-list.list-container.bottom.skin-tab {
  border-top: 1px solid hsl(0, 0%, 90%);
}
.ui-list.list-container.bottom .ui-list.item.skin-tab {
  transition: 0.25s;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 96%);
  height: 100%;
  font-weight: 500;
  align-self: flex-start;
  position: relative;
  top: -1px;
}
.ui-list.list-container.bottom .ui-list.item.skin-tab.selected {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid hsl(0, 0%, 75%);
  background-color: hsl(0, 0%, 91%);
  border-top: 1px solid hsl(0, 0%, 90%);
  font-weight: 900;
}
.ui-list.list-container.left .ui-list.item.skin-tab:hover {
  background-color: hsl(0, 0%, 91%);
}

/* MOODS */
.ui-list.list-container .ui-list.item.skin-tab:hover {
  background-color: hsl(0, 0%, 91%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-success {
  background-color: hsl(120, 39%, 91%);
  border-color: hsl(120, 39%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-error {
  background-color: hsl(2, 64%, 91%);
  border-color: hsl(2, 64%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-warning {
  background-color: hsl(35, 84%, 91%);
  border-color: hsl(35, 84%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-info {
  background-color: hsl(194, 66%, 91%);
  border-color: hsl(194, 66%, 84%);
}