@import "../HSLBuilder/constants/index.scss";

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  &Item {
    transition: background-color 300ms ease-in;
    background-color: white;
    position: relative;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    border-top: 1px solid $border-color;
    padding: 10px 15px;
    & > .list {
      margin-left: 15px;
    }
    &Action {
      display: none;
      margin-left: auto;
      box-sizing: border-box;
    }
  }
  &Item:last-child {
    border-bottom: 1px solid $border-color;
  }
  &Item.active {
    background-color: rgba(32, 156, 255, 0.1);
  }
  &Item:not(.active):hover {
    background-color: #eee;
  }
  &Item:hover {
    .listItemAction {
      display: flex;
    }
  }
}