/* COMMUNITY SERVER ONBOARDING */

// POPOUT
%onboardingEduPopout {
  background-color: cv('bg.general.popout');
}
%onboardingEduPopoutArrow {
  border-bottom-color: cv('bg.general.card');
}

// PROGRESS
%onboardingProgressBarContainer {
  %onboardingProgressBar {
    background-color: hsla(0, 0%, 100%, 0.3);
    + %textExtraSmallMedium {
      color: hsla(0, 0%, 100%, 0.3) !important;
    }
  }
  %onboardingProgressBarCurrent {
    background-color: $main-color;
    + %textExtraSmallMedium {
      color: $main-color !important;
    }
  }
  &:hover {
    %onboardingProgressBar {
      background-color: $hover-color;
    }
  }
}

// LINKS
%anchor {
  %textSmallMedium {
    color: #fff !important;
  }
}

// FOOTER
%onboardingFooterContainer {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4)) !important;
  box-shadow: none;
}

// DEFAULT CHANNELS
%onboardingChannelRow {
  background-color: cv('bg.general.card');
  &:hover:not(%onboardingChannelRowDisabled) {
    background-color: hsla(0, 0%, 100%, 0.05);
  }
}
%onboardingChannelRowSeparator {
  margin: -1px 0 0;
  background-color: hsla(0, 0%, 100%, 0.05);
}
%onboardingChannelListHeader,
%onboardingChannelList {
  background-color: cv('bg.general.card');
}
%onboardingChannelListHeaderContainer {
  background-color: transparent;
}
%onboardingChannelListHeader {
  %textExtraSmallBold {
    color: $main-color !important ;
  }
}
%onboardingChannelListProgressBar {
  background-color: $main-color !important;
}
%onboardingChannelListProgressIcon {
  path {
    &[fill='var(--background-accent)'] {
      fill: var(--danger-color);
    }
    &[fill='var(--brand-500)'] {
      fill: var(--success-color);
    }
  }
}
%onboardingChannelChattableIndicator {
  background-color: $main-color;
}

// CUSTOMISATION QUESTIONS
%onboardingChannelCoverage {
  background-color: cv('bg.general.card');
}
%onboardingChannelCoverageProgress {
  background-color: $main-color !important;
}
%onboardingChannelCoverageDetails {
  background-color: transparent;
}
%onboardingChannelCoveragePill {
  border-radius: 20px;
  background-color: cv('bg.general.card');
  border: 2px solid $main-color;
}
%onboardingAddQuestion {
  border-color: hsla(0, 0%, 100%, 0.3);
  %onboardingAddQuestionIcon {
    color: $main-color;
  }
  %textMediumMedium {
    color: $main-color !important;
  }
  &:hover {
    border-color: $hover-color;
    %onboardingAddQuestionIcon {
      color: $hover-color;
    }
    %textMediumMedium {
      color: $hover-color !important;
    }
  }
}
%onboardingQuestionContainer {
  background-color: cv('bg.general.card');
  border: 2px solid $main-color;
}
%onboardingQuestionExample {
  background-color: cv('bg.general.card');
  border-radius: 20px;
  border: 2px solid $main-color;
}
%onboardingQuestionDropdown {
  background-color: cv('bg.general.popout');
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

// SERVER GUIDE
%onboardingActionExampleBadIcon {
  background-color: $main-color;
  color: #fff;
}
%onboardingActionItem,
%onboardingResourceChannel {
  background-color: cv('bg.general.card');
}
%onboardingActionItemIcon {
  background-color: $main-color;
  color: #fff;
}
%onboardingActionAdd {
  border-color: hsla(0, 0%, 100%, 0.3);
  color: $main-color;
  %textMediumNormal {
    color: $main-color;
  }
  &:hover {
    background-color: transparent;
    border-color: $hover-color;
    color: $hover-color;
    %textMediumNormal {
      color: $hover-color;
    }
  }
}
%onboardingActionPreviewPill {
  background-color: cv('bg.general.card');
  %textSmallMedium {
    color: #fff;
  }
}
%onboardingActionPreviewPillSelected {
  background-color: $main-color;
}

// REVIEW
%onboardingReviewHeader,
%onboardingReviewStepContainer {
  background-color: cv('bg.general.card');
}
%onboardingReviewIconContainer {
  background-color: $main-color;
}
%onboardingReviewIcon {
  color: #fff;
}

%onboardingRecommendedDefaultChannels {
  background-color: cv('bg.general.card');
}

%onboardingChannelPermissionsMenu {
  background-color: cv('bg.general.card');
}

%onboardingChannelPermissionsItems {
  background-color: $hover-color;
}

%onboardingRecommendedReadOnly {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
}

%onboardingPickAnEmoji {
  background-color: transparent;
  border: none;
  &:hover {
    background-color: $hover-color;
  }
}

%onboardingEnterRoles {
  background-color: cv('bg.general.card');
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.05);
  }
}
