@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(list) {
  width: 100%;
  overflow: hidden;
  @include m(border) {
    border-radius: getCssVar("radius", "medium");
    border: 1px solid getCssVar("color", "fill-3");
    @include be(list, item) {
      border-bottom: 1px solid getCssVar("color", "fill-3");
      &:last-child {
        border-bottom: none;
      }
    }
  }
  @include e(wrapper) {
    position: relative;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  @include m(wrapper-move) {
    transition: transform 0.3s ease;
  }
  @include e(item) {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    color: getCssVar("color", "text-1");
    @include when(selected) {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
      &:hover {
        background-color: getCssVar("color", "fill-2");
        color: getCssVar("color", "primary-6");
      }
    }
  }
  @include m(drag) {
    cursor: move;
  }
  @include m(ghost) {
    opacity: 1;
  }
  @include m(hover) {
    border-radius: getCssVar("radius", "medium");
    &:hover {
      background-color: getCssVar("color", "fill-2");
    }
  }
}