@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  padding: 12px;
  background-color: $light-color01;
}

.item {
  display: flex;
  position: relative;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid $border-color;
  align-items: center;
  cursor: pointer;
  transition: all $trans-speed ease-in-out;

  &:hover {
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2);
    border-color: $dark-color01;
  }

  & + .item {
    margin-top: 8px;
  }

  &.disabled {
    opacity: 0.7;
    &:hover {
      box-shadow: none;
      border-color: $border-color;
    }
  }

  :global {
    .checkbox {
      margin-right: 12px;
    }
  }
}

.cluster {
  flex: 1;
  overflow: hidden;
}
