@prefix: list-select;

.@{prefix} {
  &- {
    &root {
      border: 1px solid #DDDDDD;
      border-radius: 4px;
      overflow: hidden;
    }

    &large {
      .@{prefix}-item {
        height: 48px;
        padding: 0px 24px;
      }
    }

    &middle {
      .@{prefix}-item {
        height: 40px;
        padding: 0px 20px;
      }
    }

    &small {
      .@{prefix}-item {
        height: 32px;
        padding: 0px 16px;
      }
    }

    &item {
      cursor: pointer;
      display: flex;
      align-items: center;
      background-color: transparent;
      transition: background-color 300ms;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      &:not(:first-child) {
        border-top: 1px solid #EEEEEE;
      }
    }

    &checked {
      &,&:hover {
        font-weight: bold;
        color: #ffffff;
        background-color: #1199ff;
      }

    }
  }
}