@import "../new_variables/mixins";
@import "../new_variables/colors";
@import "../new_variables/sizes";

.ChangePrivacyList {
  @include display-flex();
  @include justify-content(center);
  @include align-items(stretch);
  @include align-content(space-between, justify);
}
.ChangePrivacyList-item {
  @include display-flex();
  @include flex-direction(column);
  @include justify-content(flex-start);
  @include align-items(center);
  @include align-content(space-between, justify);
  text-align: center;
  padding: $sMargin-element;
  border: 1px solid $cStructure-mainLine;
  border-radius: $sCard-borderRadius;
  background-color: $cStructure-mainBkg;
  width: 25%; // Assumes that there are exatly 4 items
}
.ChangePrivacyList-item.is-disabled {
  background-color: $cStructure-grayBkg;
}
.ChangePrivacyList-item.is-selected {
  border-color: $cCard-selectedBorder;
}
.ChangePrivacyList-item:not(:last-child) {
  margin-right: $sMargin-element;
}
.ChangePrivacyList-item > *:first-child {
  margin-bottom: $sMargin-elementInline;
}
.ChangePrivacyList-item > *:not(:first-child) {
  margin-bottom: $sMargin-min;
}

@import "../new_variables/mixins";
@import "../new_variables/colors";
@import "../new_variables/sizes";

.ChangePrivacyList {
  @include display-flex();
  @include justify-content(center);
  @include align-items(stretch);
  @include align-content(space-between, justify);
}
.ChangePrivacyList-item {
  @include display-flex();
  @include flex-direction(column);
  @include justify-content(flex-start);
  @include align-items(center);
  @include align-content(space-between, justify);
  text-align: center;
  padding: $sMargin-element;
  border: 1px solid $cStructure-mainLine;
  border-radius: $sCard-borderRadius;
  background-color: $cStructure-mainBkg;
  width: 25%; // Assumes that there are exatly 4 items
}
.ChangePrivacyList-item.is-disabled {
  background-color: $cStructure-grayBkg;
}
.ChangePrivacyList-item.is-selected {
  border-color: $cCard-selectedBorder;
}
.ChangePrivacyList-item:not(.is-disabled):hover {
  border-color: $cCard-hoverBorder;
  background-color: $cCard-hoverFill;
}
.ChangePrivacyList-item:not(:last-child) {
  margin-right: $sMargin-element;
}
.ChangePrivacyList-item > *:first-child {
  margin-bottom: $sMargin-elementInline;
}
.ChangePrivacyList-item > *:not(:first-child) {
  margin-bottom: $sMargin-min;
}

Set :hover style for non-disabled options
Set :hover style for non-disabled options
