.p-upgrades_icon {
  color: $primary;
}

.p-upgrades_icon_container {
  background-color: $hl;
}

.p-upgrades_modal__icon_container {
  background-color: $hl;

  > i {
    color: $primary;
  }
}

.p-upgrades_icon--light_purple,
.p-upgrades_icon--purple {
  color: $purple;
}

.sk-client-theme--dark {
  .p-upgrades_icon--light_purple,
  .p-upgrades_icon--purple {
    color: $purple;
  }
}

.p-upgrades_icon_container--purple {
  background-color: $notif;

  .p-upgrades_icon--purple {
    color: $accent2;
  }
}

.sk-client-theme--dark .p-upgrades_icon_container--purple {
  background-color: $notif;

  .p-upgrades_icon--purple {
    color: $accent2;
  }
}

.p-upgrades_icon_container--light_purple {
  background-color: $notif;
}

.sk-client-theme--dark .p-upgrades_icon_container--light_purple {
  background-color: $notif;

  .p-upgrades_icon--light_purple {
    color: $accent2;
  }
}

.p-upgrades_icon--error {
  color: $red;
}

.p-upgrades_icon_container--error {
  background-color: $notif;
}

.p-pro_badge--purple {
  background-color: $accent;
  color: $selectFg;
}

.sk-client-theme--dark .p-pro_badge--purple {
  background-color: $accent;
  color: $selectFg;
}

.c-menu_item__li--highlighted .p-pro_badge--purple {
  background-color: $selectBg;
  color: $purple;
}

.sk-client-theme--dark .c-menu_item__li--highlighted .p-pro_badge--purple {
  color: $purple;
}

.p-pro_badge--white {
  background-color: $accent;
  color: $selectFg;
}

.p-upgrades_modal_with_banner--close_button_light .c-icon_button {
  color: $fg;

  &:hover {
    background: $button;
    color: $selectFg;
  }
}

.p-upgrades_modal_with_banner--close_button_dark .c-icon_button {
  color: $fg;

  &:hover {
    background: $button;
    color: $selectFg;
  }
}

.p-upgrades_modal_with_banner--close_button_gold .c-icon_button {
  color: $yellow;

  &:hover {
    background: $button;
    color: $selectFg;
  }
}

@media screen and (max-height: 600px), screen and (max-width: 450px) {
  .p-upgrades_modal_with_banner--close_button .c-icon_button {
    color: $fg;

    &:hover {
      background: $button;
      color: $selectFg;
    }
  }
  .sk-client-theme--dark .p-upgrades_modal_with_banner--close_button .c-icon_button {
    color: $fg;

    &:hover {
      background: $button;
      color: $selectFg;
    }
  }
}

.p-upgrades_alert_banner--blue,
.p-upgrades_alert_banner--purple {
  background-color: $notif;
  border-color: $notif;
}

.sk-client-theme--dark .p-upgrades_alert_banner--blue,
.sk-client-theme--dark .p-upgrades_alert_banner--purple {
  background-color: $notif;
  border-color: $notif;
}

.p-upgrades_alert_banner__body .c-link,
.p-upgrades_alert_banner__body .c-link--button {
  color: $accent2;
}

.p-upgrades_alert_banner__body .c-link--button:hover,
.p-upgrades_alert_banner__body .c-link:hover {
  color: $accent2T;
}

.p-modal_content_checklist__checklist_check {
  color: $accent;
}

.p-upgrades_coachmark {
  background-color: $notif;
  border: 1px solid $borderLight;
}

.sk-client-theme--dark .p-upgrades_coachmark {
  background-color: $notif;
  border-color: $borderLight;
}

.p-upgrades_coachmark--top-right:before {
  border-top-color: $button;
}

.sk-client-theme--dark .p-upgrades_coachmark--top-right:before {
  border-top-color: $button;
}

.p-upgrades_coachmark--top-right:after {
  border-top-color: $button;
}

.sk-client-theme--dark .p-upgrades_coachmark--top-right:after {
  border-top-color: $button;
}

.p-upgrades_coachmark--left:before {
  border-left-color: $button;
}

.sk-client-theme--dark .p-upgrades_coachmark--left:before {
  border-left-color: $button;
}

.p-upgrades_coachmark--left:after {
  border-left-color: $button;
}

.sk-client-theme--dark .p-upgrades_coachmark--left:after {
  border-left-color: $button;
}

.p-upgrades_coachmark__label {
  color: $text;
}

.p-upgrades_coachmark__heading {
  color: $fg;
}

.p-upgrades_button__rocket {
  color: $text;
}

.p-upgrades_button--sidebar {
  .p-upgrades_button__rocket {
    color: $text;
  }
}

.p-ia4_client--theming .p-upgrades_button--sidebar .p-upgrades_button__rocket {
  color: $text;
}

.p-ia__sidebar_header--instant_slack {
  background-color: $bg;
  border-bottom: 1px solid $border;

  &.p-ia__sidebar_header--dark {
    border-color: $border;
  }
}
