.publish-visibility-sheet__grabber {
  width: 36px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: $muted;
  opacity: 0.4;
}

.publish-visibility-sheet__title,
.publish-visibility-sheet__desc {
  display: block;
  padding: 0 4px;
}

.publish-visibility-sheet__title {
  color: $fg;
  font: 600 16px / 1 $font-display;
}

.publish-visibility-sheet__desc {
  margin-top: 6px;
  margin-bottom: 10px;
  color: $muted;
  font: 400 11px / 1.4 $font-body;
}

.publish-visibility-sheet__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 12px;
}

.publish-visibility-sheet__option--checked {
  background: rgba(216, 180, 255, 0.08);
}

.publish-visibility-sheet__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $primary-on;
}

.publish-visibility-sheet__icon--public {
  background: linear-gradient(135deg, $accent, #a4d4ff);
}

.publish-visibility-sheet__icon--friends {
  background: linear-gradient(135deg, $success, $accent);
}

.publish-visibility-sheet__icon--private {
  background: linear-gradient(135deg, $accent-2, $primary);
}

.publish-visibility-sheet__text {
  flex: 1;
}

.publish-visibility-sheet__name,
.publish-visibility-sheet__sub {
  display: block;
}

.publish-visibility-sheet__name {
  color: $fg;
  font: 500 14px / 1.2 $font-body;
}

.publish-visibility-sheet__sub {
  margin-top: 3px;
  color: $muted;
  font: 400 11px / 1.4 $font-body;
}

.publish-visibility-sheet__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid $muted;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $primary-on;
  box-sizing: border-box;
}

.publish-visibility-sheet__option--checked .publish-visibility-sheet__check {
  background: $accent;
  border-color: $accent;
}
