/* ==UserStyle==
@name Canvas LMS Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/canvas-lms
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/canvas-lms
@version 2026.04.09
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms
@description Soothing pastel theme for Canvas LMS
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@import "https://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";

@-moz-document domain("instructure.com"), domain("instructuremedia.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    /* GLOBALS/VARIABLES */
    --ic-brand-primary: @accent;
    --ic-brand-primary-lightened-15: lighten(@accent, 5%);
    --ic-brand-primary-darkened-28: darken(@accent, 10%);
    --ic-brand-primary-darkened-10: darken(@accent, 3%);
    --ic-brand-font-color-dark: @text;
    --ic-brand-font-color-dark-lightened-15: @subtext1;
    --ic-brand-font-color-dark-lightened-28: @subtext0;
    --ic-brand-font-color-dark-lightened-30: @subtext0;
    --ic-link-color: @blue;
    --ic-link-color-darkened-10: fade(@blue, 90%);
    --ic-link-color-lightened-10: lighten(@blue, 10%);

    /* hover colors, used based on whether canvas's css has a blue hover or grayed-out hover color */
    @hover-regular: fade(@surface2, 50%);
    @hover-accent: mix(@base, @accent, 70%);

    /* GENERAL UI CHANGES */

    #footer,
    body {
      color: @text;
      border-color: @surface1;
      background-color: @base;
    }
    hr {
      border-color: @surface1;
    }
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {
      &ic-Input {
        border-color: @surface1;
        background-color: @surface0;
      }
      background-color: @base;
      border-color: @surface2;
    }
    img:not(
      [src^="/"],
      [src*="cloudfront.net/dist"],
      [src*="instructuremedia.com/build"]
    ) {
      /* force a white background for user-uploaded images */
      background-color: #fffd;
    }
    scrollbar-color: @surface2 @surface0;

    table {
      border-color: @surface1;
    }
    table[style*="border-color: #000000"] {
      border-color: @surface1 !important;
    }
    thead th {
      border-color: @surface1;
    }
    tbody tr,
    tbody td {
      border-color: @surface1;
    }
    td[class$="view-cell"] {
      color: @text;
    }

    :is(label, fieldset) span[class$="formFieldLabel"] {
      color: @subtext1;
    }

    :is(label, fieldset) span[class$="text"] {
      color: @text;
    }

    /* used for links */
    span[color="brand"] {
      color: @blue;
    }

    /* used for labels */
    span[color="primary"] {
      color: @subtext1;
    }
    span[color="secondary"] {
      color: @subtext0;
    }

    .user_content {
      /* for highlighted non-links in user-created content, revert to regular-ish text color */
      [style~="background-color:"]:not([style~="color:"])
        :not(a.external span) {
        color: black;
      }
      /* just a special exception for pure black text and pure white backgrounds */
      [style*="color: rgb(0, 0, 0)"],
      [style*="color: black"],
      [style*="color: #000000"] {
        &:not([style~="background-color:"]) {
          color: @text !important;
        }
      }
      [style*="background-color: rgb(255, 255, 255)"],
      [style*="background-color: white"],
      [style*="background-color: #ffffff"] {
        color: @text !important;
        background-color: @base !important;
      }
    }

    a[class$="link"]:not(.btn, .ic-DashboardCard__link),
    a[class$="link"] > span,
    button[class$="link"]:not(.btn) {
      color: @blue;
      &:focus {
        outline-color: @accent;
      }
    }
    a.external span {
      color: @blue;
    }

    /* sticky footers (e.g. teacher-side course settings) */
    .sticky-footer {
      background-color: @surface0;
    }
    .form-actions-sticky-footer {
      border-color: @surface1;
    }

    /* spinners */
    [class*="spinner__circleTrack"] {
      stroke: @surface1 !important;
    }
    [class*="spinner__circleSpin"] {
      stroke: @accent !important;
    }

    /* fullscreen background for modal popups */
    :where(body > span > span[class*="mask"]) {
      /* modals */
      background-color: fade(@overlay0, 75%);
      > span {
        color: @text;
        background-color: @base;
        border-color: @surface1;
        div[class$="modalHeader"] {
          background-color: transparent;
          border-color: @surface1;
          button:has(svg[name="IconX"]) {
            .flush-button();
          }
        }
        img {
          background-color: transparent;
        }
        > div[class$="modalFooter"] {
          background-color: @surface0;
          border-color: @surface1;
          button {
            .neutral-button();
          }
        }
      }
    }

    div[class*="view-panel__content"] {
      color: @text;
    }

    /* dialogs */
    .ui-datepicker td span.ui-state-default.ui-state-hover,
    .ui-datepicker td a.ui-state-default.ui-state-hover {
      border-color: @surface2;
      background-color: @surface1;
    }
    .ui-datepicker-header.ui-widget-header,
    .ui-widget-content {
      background-color: @surface0;
      border-color: @surface1;
    }
    .ui-widget-overlay {
      background-color: fade(@base, 70%);
    }
    .ui-dialog {
      .ui-dialog-titlebar {
        background-color: @surface0;
        border-color: @surface1;
      }
      background-color: @surface0;
    }
    .ui-datepicker .ui-datepicker-time,
    .ui-dialog .ui-dialog-buttonpane {
      background-color: @surface1;
      border-color: @surface2;
    }
    .form-dialog .form-controls {
      background-color: @surface1;
      border-color: @surface2;
    }

    /* global nav menu */
    .ic-app-header {
      .ic-app-header__logomark-container {
        background-color: transparent;
      }
      .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active {
        > * {
          background-color: @base;
        }
        .menu-item__text {
          background-color: transparent;
        }
        .ic-app-header__menu-list-link:focus {
          box-shadow:
            inset 0 0 0 0.125rem @base,
            inset 0 0 0 0.25rem
            var(--ic-brand-global-nav-menu-item__text-color--active);
        }
      }
    }
    .ic-app-header__menu-list-link:focus {
      box-shadow: inset 0 0 0 0.125rem @surface1, inset 0 0 0 0.25rem @surface2;
    }
    --ic-brand-global-nav-menu-item__text-color--active: @accent;
    --ic-brand-global-nav-menu-item__badge-text--active: @mantle;
    --ic-brand-global-nav-ic-icon-svg-fill--active: @accent;
    --ic-brand-global-nav-avatar-border: @text;

    --ic-brand-global-nav-bgd: @mantle;
    --ic-brand-global-nav-menu-item__badge-bgd: @surface2;
    --ic-brand-global-nav-menu-item__badge-text: @text;
    --ic-brand-global-nav-menu-item__text-color: @text;
    --ic-brand-global-nav-ic-icon-svg-fill: @text;
    .menu-item-icon-container path[fill] {
      fill: @text !important;
    }

    /* sidebar sliding trays */
    body > span > [class*="tray"] {
      background-color: @mantle;
      fieldset,
      label {
        .Gradebook__StatusModalListItem span {
          color: black !important;
        }
      }
      div[class$="tray__content"] > div > span:last-of-type:has(> button) {
        border-color: @surface1;
        background-color: @crust;
      }
      span[data-testid$="footer"] > div {
        border-color: @surface1;
        background-color: @crust;
      }
    }

    div[aria-label="Global Navigation"] [class$="summaryText"] svg {
      /* mobile nav menu icons */
      color: @blue;
    }

    #nav-tray-portal {
      > span > span {
        background-color: @base;
        [class$="listItem"] {
          color: @subtext0;
        }
        /* needed to persist color on hover */
        a {
          color: @blue;
        }
        div[data-timestamp] {
          color: @subtext0;
        }
      }
      label span[class$="label"] {
        color: @text;
      }
      .help-tray li [class$="pill"] {
        /* new pill */
        border-color: @green;
        color: @green;
        background-color: transparent;
      }
      .profile-tray span[class$="avatar"] {
        background-color: @surface0;
        span {
          color: @accent;
        }
      }
    }

    .profile-tray button[aria-describedby^="Tooltip"] {
      /* info tooltip on high contrast ui checkbox */
      .flush-button();
    }

    /* link sidebar for courses */
    .list-view a.active {
      border-color: @accent;
      color: @accent;
    }

    /* pills */
    div[class$="pill"] {
      /* info pill (e.g. submitted, graded, etc) */
      background-color: transparent;
      border-color: @surface2;
      color: @text;
      &.css-tfc09q-pill.css-tfc09q-pill {
        /* red pills (late, missing) */
        color: @red;
        border-color: @red;
      }
    }
    .pill {
      background-color: @surface1;
      border-color: @surface2;
      box-shadow: 0 1px 0 @surface2;
    }
    /* pills on grades tab */
    .student_assignment [class$="pill"] {
      background-color: transparent;
    }
    .submission-missing-pill > span > div {
      color: @red;
      border-color: @red;
    }
    .submission-late-pill > span > div {
      /* yes, this is blue in grades and red on dashboard */
      color: @blue;
      border-color: @blue;
    }

    /* filled-in buttons - this auto-generated class covers a lot of them */
    @hover-button: @surface1;
    .neutral-button() {
      color: @text;
      background-color: @surface0;
      border-color: @surface1;
      &:hover {
        background-color: @hover-button;
        > [class$="baseButton__content"] {
          background-color: @hover-button;
        }
        color: @text;
      }
      path[fill="#000000"] {
        fill: @text;
      }
      > [class$="baseButton__content"] {
        color: @text;
        background-color: @surface0;
        border-color: @surface1;
        transition-property: background, transform, filter;
      }
      [class$="text"] {
        color: @text;
      }
    }

    /* this is for buttons that are accent-colored */
    @hover-accent-button: mix(@base, @accent, 20%);
    .accent-button() {
      background-color: @accent;
      border-color: @surface1;
      path[fill="#000000"] {
        fill: @mantle;
      }
      > [class$="baseButton__content"] {
        transition-property: all;
        color: @mantle;
        background-color: @accent;
        border-color: @surface1;
      }
      &:hover {
        background-color: @hover-accent-button;
        > [class$="baseButton__content"] {
          background-color: @hover-accent-button;
        }
        color: @mantle;
      }
    }

    span[type="button"] {
      .neutral-button();
    }

    /* this is for buttons that have no border/background until hovered */
    @hover-flush-button: fade(@surface1, 30%);
    .flush-button() {
      color: @text;
      background-color: transparent;
      border-color: transparent;
      &:hover {
        background-color: @hover-flush-button;
        > [class$="baseButton__content"] {
          background-color: @hover-flush-button;
        }
        color: @text;
      }
      path[fill="#000000"] {
        fill: @text;
      }
      > [class$="baseButton__content"] {
        color: @text;
        transition-property: background, transform, filter;
      }
      [class$="text"] {
        color: @text;
      }
    }

    .btn:not(.btn-primary, .btn-link),
    .Button:not(
      .Button--link,
      .Button--primary,
      .Button--icon-action,
      .Button--icon-action-danger,
      .Button--icon-action-rev
    ),
    .ui-button {
      background-color: @surface0;
      color: @text;
      border-color: @surface1;
      &:focus {
        color: @text;
      }
      &:hover {
        background-color: @hover-button;
        color: @text;
      }
      &.ui-state-hover {
        background-color: @hover-button;
        color: @text;
        border-color: darken(@surface1, 5%);
      }
      &:active {
        background-color: darken(@hover-button, 3%);
      }
      &.active, &.Button--active {
        background-color: @subtext0;
        border-color: lighten(@surface1, 10%);
        color: @mantle;
      }
    }

    .btn-link,
    .Button--link {
      &.active, &.Button--active, &.ui-button.ui-state-active, &:active {
        background: @surface0;
      }
      &.disabled, &.ui-button.ui-state-disabled, &[disabled] {
        background: transparent;
      }
    }

    /* the below styles are taken from canvas's common css sheet */
    .ui-button.ui-state-active:hover,
    .ui-button.ui-state-active,
    .ui-progressbar .ui-button.ui-widget-header {
      background-color: @subtext0;
      border-color: lighten(@surface1, 10%);
      color: @mantle;
    }

    --ic-brand-button--primary-bgd: @accent;
    --ic-brand-button--primary-text: @crust;
    --ic-brand-button--primary-bgd-darkened-5: darken(@accent, 5%);
    --ic-brand-button--primary-bgd-darkened-15: darken(@accent, 15%);

    .ui-progressbar .btn-link.ui-button.ui-widget-header,
    .ui-progressbar .Button--link.ui-button.ui-widget-header {
      background: @surface0;
    }

    .btn-published,
    .btn-published:hover {
      background: @green;
      border-color: 1px solid darken(@green, 10%);
      color: @crust;
    }

    .btn-published:focus {
      box-shadow: inset 0 0 0 2px @crust;
      background: darken(@green, 10%);
      color: @crust;
    }

    .btn-published.disabled,
    .btn-published.ui-button.ui-state-disabled,
    .btn-published.disabled:hover {
      border-color: darken(@green, 10%);
      background: @green;
      color: @crust;
    }

    .btn-unpublished {
      color: @crust;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      background-color: @red;
      background-image: @red;
      border-color: @maroon;
    }

    .btn-unpublished:hover,
    .btn-unpublished:active,
    .btn-unpublished.active,
    .btn-unpublished.disabled,
    .btn-unpublished.ui-button.ui-state-disabled,
    .btn-unpublished[disabled] {
      color: @crust;
      background-color: @maroon;
    }

    .btn-unpublished:focus {
      color: @crust;
      background: @maroon;
      box-shadow: inset 0 0 0 2px @crust;
    }
    /* end of copy-pasted styles */

    span[role="button"]::before, /* drag handle */
    :is(button, a)[class$="baseButton"]::before {
      border-color: @accent;
    }

    .ActionButtons button[id^="Drilldown"] {
      .accent-button();
    }

    .Button--icon-action:hover,
    .Button--icon-action-danger:hover,
    .Button--icon-action-rev:hover,
    .Button--icon-action:focus,
    .Button--icon-action-danger:focus,
    .Button--icon-action-rev:focus {
      background: transparent !important;
    }

    .Button--icon-action-rev:focus {
      box-shadow: inset 0 0 0 2px @text;
    }

    .btn-primary:focus, .Button--primary:focus {
      box-shadow: inset 0 0 0 2px @crust;
    }

    /* outlines around clicked elements */
    [class$="__facade"] {
      &::before {
        border-color: @accent;
      }
    }
    textarea + span[class$="textArea__outline"] {
      border-color: @accent;
    }

    /* checkboxes */
    input + label span[class$="checkboxFacade__facade"] {
      border-color: @surface2;
      background-color: @base;
    }
    input:checked + label span[class$="checkboxFacade__facade"] {
      border-color: @surface2;
      background-color: @text;
      color: @base;
    }

    /* toggle switches */
    input + label [class*="toggleFacade__facade"] {
      border-color: @surface1;
      background-color: @surface0;
      span[class$="__iconToggle"] {
        &::before {
          background-color: @text;
          border-color: @surface2;
        }
        svg {
          color: @mantle;
        }
      }
    }
    input:checked + label [class*="toggleFacade__facade"] {
      border-color: @surface1;
      background-color: @green;
      span[class$="__iconToggle"] {
        &::before {
          background-color: @mantle;
          border-color: @green;
        }
        svg {
          color: @green;
        }
      }
    }

    input + label span[class$="label"] {
      color: @text;
    }

    /* dropdown menu buttons */
    [class$="textInput__facade"] {
      color: @text;
      background-color: transparent;
      border-color: @surface2;
      input {
        color: @text !important;
      }
    }
    select {
      color: @text;
      border-color: @surface2;
      background-color: @base;
    }

    /* notifications */
    .ic-notification {
      color: @text;
      box-shadow: 0 1px 6px @surface1;
      .ic-notification__content {
        background-color: @base;
      }
      i {
        color: @crust;
      }
    }

    .ui-state-warning,
    .dialog-warning .ui-dialog-titlebar,
    .dialog-warning .ui-datepicker .ui-datepicker-header,
    .ui-datepicker .dialog-warning .ui-datepicker-header {
      border-color: @red;
      background: none;
      color: @text;
    }

    /* alerts */
    div[class*="view-alert"] {
      color: @text;
      background-color: @base;
      border-color: @accent;
      > div {
        border-color: @accent;
      }
      > div:has(> svg) {
        background-color: @accent;
      }
    }

    /* pdf reader */
    .Pages {
      background-color: @surface0;
    }

    /* ui tabs */
    .ui-tabs {
      .ui-tabs-panel,
      .ui-tabs-nav {
        border-color: @surface1;
      }
      .ui-tabs-nav li.ui-state-hover,
      .ui-tabs-nav li:hover,
      .ui-tabs-nav li.ui-tabs-active,
      .ui-tabs-nav li.ui-tabs-active.ui-state-hover,
      .ui-tabs-nav li.ui-tabs-active:hover {
        background-color: @base;
        border-color: @surface1;
        a {
          color: @text;
        }
      }

      .ui-state-hover {
        background-color: mix(@overlay2, @surface1, 20%);
      }
      .ui-tabs-panel {
        background-color: @base;
      }
      #assignments {
        tr .title {
          border-color: @surface1;
        }
      }
    }

    div[class$="view-tabs__container"] {
      background-color: transparent;
      div[class$="view-tab"] {
        background-color: transparent;
        color: @text;
        &[aria-selected="true"] {
          border-color: @surface2;
          border-bottom-color: @base;
        }
      }
      div[role="tabpanel"] > div {
        background-color: transparent;
        border-color: @surface1;
      }
    }
    div[role="tab"] {
      color: @text;
      &[aria-selected="true"]::after {
        background-color: @accent;
      }
    }

    /* RECENT ACTIVITY/HOME */
    .recent-activity-header,
    .stream-category {
      border-color: @surface1;
    }
    .stream-details tr:hover,
    .stream_header:hover {
      background-color: @hover-accent;
    }
    .pages.show .course-title {
      color: @subtext0;
    }

    /* ANNOUNCEMENTS */
    .ic-item-row {
      box-shadow: @surface1 0 -1px 0 0;
      box-shadow: 0 -1px @surface1, inset 0 -1px @surface1;
    }
    [data-testid="pill-container"] * {
      color: @subtext0 !important;
    }

    /* the unread badge */
    .ic-announcement-row span[class$="badge"] {
      background-color: @accent;
    }

    .ic-item-row__meta-content-timestamp > p {
      color: @subtext0;
    }
    #mark_all_announcement_read {
      .neutral-button();
    }

    /* DASHBOARD */
    .StickyButton-styles__root {
      background-color: @accent;
      span {
        color: @mantle;
      }
    }
    .NotificationBadge-styles__activityIndicator.NotificationBadge-styles__hasBadge
      [class$="badge"] {
      background-color: @accent;
    }
    .Day-styles__root {
      background-color: @base;
      color: @text;
      h2 {
        border-color: @surface1;
      }
      .Grouping-styles__title {
        color: @blue;
        background-color: @base;
        &::after {
          background-image: none;
        }
      }
      .PlannerItem-styles__root {
        border-color: @surface1;
        color: @subtext0;
      }
      .PlannerItem-styles__secondary [class$="-text"] {
        color: @subtext0;
      }
    }
    #planner-today-btn,
    .PlannerItem-styles__secondary button {
      .neutral-button();
    }

    .CompletedItemsFacade-styles__root {
      border-color: @surface1;
    }
    .CompletedItemsFacade-styles__contentPrimary * {
      color: @blue;
    }
    button[data-testid="completed-items-toggle"] {
      span[class$="summaryText"] {
        color: inherit;
      }
    }
    .ic-Dashboard-header {
      background-color: @base;
    }
    .ic-Dashboard-header__layout {
      background-color: @base;
      border-color: @surface1;
    }
    .PlannerHeader-styles__root {
      background-color: @base;
      svg {
        color: @text;
      }
    }
    #DashboardOptionsMenu_Container button {
      .flush-button();
    }
    .ic-DashboardCard {
      background-color: @surface0;
      .ic-DashboardCard__header_content {
        background-color: @surface0;
      }
      .ic-DashboardCard__header-button,
      .ic-DashboardCard__header-button * {
        background-color: transparent;
      }
      .ic-DashboardCard__action-badge {
        background-color: @accent;
        .unread_count {
          background-color: @accent;
          color: @base;
        }
      }
    }

    .ToDoSidebarItem__Info li {
      color: @text;
    }
    .Sidebar__TodoListContainer svg {
      color: @text;
    }
    #right-side {
      .h2,
      h2 {
        border-color: @surface1;
      }
      background-color: fade(@base, 80%);
      .details .header {
        color: @subtext0;
      }
      .ToDoSidebarItem__Close svg {
        color: @text;
      }
    }
    #right-side .events_list {
      p {
        color: @subtext0;
      }

      .event-details::after {
        background: linear-gradient(to right, transparent 0%, @base 80%);
      }
    }
    .PlannerEmptyState-styles__root {
      color: @text;
    }
    .EmptyDays-styles__root {
      background-color: @base;
      color: @text;
      border-color: @surface2;
      > h2 {
        border-color: @surface1;
      }
    }
    form[action="/logout"] button {
      .neutral-button();
    }
    .PlannerHeader [id^="Badge"] {
      background-color: @accent;
      color: @crust;
    }
    .Opportunity-styles__root {
      background-color: transparent;
    }
    .Opportunity-styles__oppName {
      color: @subtext1;
    }
    .Opportunity-styles__due,
    .Opportunity-styles__points {
      color: @subtext1;
    }

    /* popup menus */
    span[data-position-content^="Menu"],
    span[data-position-content^="Popover"] {
      span[class$="arrow"] {
        filter: @surface1-filter;
      }
      > span {
        color: @text;
        background-color: @surface1;
        border-color: @surface2;
      }
    }

    .ui-menu .ui-menu-item a.ui-state-hover,
    .ui-menu .ui-menu-item a.ui-state-active,
    .ui-menu .ui-menu-item .ui-progressbar a.ui-widget-header,
    .ui-progressbar .ui-menu .ui-menu-item a.ui-widget-header,
    .ui-menu .ui-menu-item a.ui-state-focus {
      color: @crust;
    }

    /* color picker menu (e.g. on dashboard) */
    .ColorPicker__Actions button[class$="baseButton"]:not([id$="Apply"]) {
      .neutral-button();
    }
    #ColorPicker__Apply {
      .accent-button();
    }
    .ColorPicker__Container {
      background-color: @surface1;
      border-color: @surface2;
      label span {
        color: @subtext0;
      }
    }

    span[data-testid="RCE_RestoreAutoSaveModal"] {
      span[class$="view--block"] {
        background-color: transparent;
        border-color: @surface1;
        color: @text;
      }
    }
    /* select dropdowns */
    span[data-position-content^="Popover"]:has(ul[role="listbox"]) {
      border-color: @surface2;
      span {
        color: @text;
      }
      > span > span {
        background-color: @surface1;
        div[class$="separator"] {
          background-color: @surface2;
        }
        li {
          background-color: @surface1;
        }
        ul[role="listbox"] {
          background-color: @surface1;
          /* the extra selectors are because some lists have group options as list items */
          li:not(:has(ul[role="group"])) {
            &:hover,
            &:focus,
            &:active {
              color: @base;
              background-color: @accent !important;
              span {
                color: @base;
              }
            }
          }
          li:has([aria-selected="true"]) {
            background-color: mix(@surface1, @overlay2, 70%);
          }
        }
      }
    }

    /* only on canvas studio apparently */
    span[data-position-content^="Drilldown"] {
      border-color: @surface2;
      span {
        color: @text;
      }
      li {
        background-color: @surface1;
        &:not(:has([id^="DrilldownHeader-Title"])) {
          &:hover,
          &:focus,
          &:active {
            color: @base;
            background-color: @accent !important;
            span {
              color: @base;
            }
          }
        }
        [id^="DrilldownHeader-Separator"] {
          background-color: @surface2;
        }
      }
    }
    button[id^="Drilldown"] {
      > span {
        background-color: @base;
        color: @text;
        border-color: @surface2;
      }
      &:hover > span {
        background-color: @base;
      }
    }

    /* dropdown menu */
    span[data-position-content^="Menu___"] {
      span {
        color: @text;
      }
      [role="menu"] {
        &::before {
          border-color: @accent;
        }
        background-color: @surface1;
        span[class$="menuItemGroup__label"] {
          background-color: @surface1;
        }
        div[class$="menuItemSeparator"] {
          background-color: @surface2;
        }
        [role="menuitem"],
        span[class$="menuItem"] {
          background-color: @surface1;
          &:hover,
          &:focus,
          &:active {
            color: @base;
            background-color: @accent !important;
            span {
              color: @base;
            }
          }
        }
      }
    }

    ul[role="menu"] {
      div:has(> li[role="menuitem"][data-selected="true"]) {
        color: @base;
        background-color: @accent !important;
        span {
          color: @base;
        }
      }
    }

    /* use more noticeable color for file preview selection */
    #App *::selection {
      background-color: @accent;
    }

    /* ICONS */
    .nav-icon {
      background-color: @base;
      color: @text;
    }
    .ui-icon-closethick {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" width="512" height="512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon points="509.5,73.2 435.2,4 254.8,184.2 74.3,4 2.5,75.8 182.9,256 2.5,436.2 76.9,505.5 254.8,327.7 435.2,508 507,436.2 326.6,256" fill="@{text}"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}") !important;
    }
    /* publish icons */
    .publish-icon.publish-icon-published,
    .ig-published:not(.student-view) .ig-type-icon {
      color: @green;
    }
    svg[name="IconPublish"],
    svg[name="IconBookmark"],
    .icon-check {
      color: @green !important;
    }
    svg[name="IconX"] {
      color: @text;
    }

    /* tree-view expand indicators */
    svg[name="IconArrowOpenEnd"],
    svg[name="IconArrowOpenDown"] {
      color: @text;
    }

    /* unsure what the other colors are */
    span[color="success"] > svg {
      color: @green;
    }

    .context_module .icon-minimize {
      color: @red !important;
    }

    .ally-prominent-af-download-button {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="13px" viewBox="0 0 22 13" version="1.1"><title>iconAllyDownload-IC</title><desc>Created with Sketch.</desc><path d="m22.14 4.354-4.812 7.312-4.813-7.312h2.888V-.034h3.85v4.388zm-22 8.612 7.562-10.4 7.563 10.4h-3.618c-.67-1.362-2.164-2.311-3.9-2.311-1.737 0-3.231.949-3.901 2.311zM5.9 8.18c0 .911.807 1.65 1.802 1.65.994 0 1.8-.739 1.8-1.65 0-.912-.806-1.651-1.8-1.651-.995 0-1.801.74-1.801 1.65" fill="@{text}" stroke="none" stroke-width="1" fill-rule="evenodd"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
    }

    img[src="/images/svg-icons/svg_icon_download.svg"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1920" version="1.1"><path d="m1807.093 1482.477 79.736 79.963-355.313 355.312H355.346L.035 1562.44l79.85-79.963 322.22 322.334H1484.76zM997.677-.033v1167.02l355.313-355.313 79.962 79.85-491.858 491.633L449.46 891.524l79.962-79.85 355.313 355.313V-.033z" fill="@{text}" stroke="none" stroke-width="1" fill-rule="evenodd"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    .standalone-icon::before {
      color: @text;
    }

    /* MODULES */
    .item-group-expandable,
    .item-group-container {
      border-color: @surface0;
      background-color: @base;
    }
    .item-group-expandable .emptyMessage {
      background-color: @base;
    }
    .header-bar {
      background-color: @base;
    }
    .content,
    .footer {
      background-color: @base;
    }
    .ig-header {
      background-color: @surface0;
      color: @text;
      border-color: @surface1;
      .name {
        text-shadow: 1px 1px 0 fade(@base, 50%);
        color: @text;
      }
    }
    .accessible-toggler {
      color: @text;
    }
    .ig-list {
      .ig-row {
        color: @text;
        background-color: @base;
        border-color: @surface1;
      }
      .ig-row:hover {
        background-color: @hover-accent;
      }
    }
    .list-view a.active .nav-badge,
    .nav-badge {
      background-color: @accent;
      color: @base;
    }
    #breadcrumbs {
      background-color: @base;
    }
    .ic-app-nav-toggle-and-crumbs,
    .item-group-condensed {
      border-color: @surface1;
    }
    .pages.show .page-title {
      color: @text;
    }
    #show_by_date,
    #show_by_type {
      + label > span {
        color: @text;
      }
      &:checked + label > span {
        background-color: @surface1;
      }
    }

    /* COURSES */
    .course-list-favorite-course .icon-star::before {
      color: @peach;
    }
    .course-list-table .course-list-table-row:hover {
      background-color: mix(@overlay2, @base, 20%);
    }
    .course-list-unpublished-course-row {
      background-color: darken(@base, 5%);
      .course-list-unpublished-course {
        color: @red;
      }
    }
    /* browse more courses */
    .course_text {
      color: @text;
    }

    /* CALENDAR */
    #calendar-app {
      .agenda-wrapper {
        background-color: @base;
      }
      table {
        thead.fc-head,
        .fc-head-container,
        .fc-row {
          border-color: @surface1;
        }
        .fc-day-header {
          color: @text;
        }
        .fc-body {
          background-color: @base;
        }
        .fc-today {
          background-color: darken(@surface0, 5%);
        }
        .fc-divider {
          border-color: @surface2;
        }
      }
      .fc-agendaWeek-view .fc-day-grid .fc-row {
        border-color: @surface1;
      }
    }
    :is(.calendar, #calendar-drag-and-drop-container)
      .fc-row
      :is(.fc-content-skeleton, .fc-helper-skeleton)
      td {
      border-color: @surface1;
    }

    #calendar-app .fc-event,
    #calendar-drag-and-drop-container .fc-event {
      background-color: transparent;
    }
    .calendar_header #create_new_event_link {
      color: @text;
    }
    #calendar-list-holder,
    #other-calendars-list-holder,
    #undated-events {
      background-color: @base;
    }

    #minical {
      color: @text;
      background-color: @surface1;
      border-color: @surface1;
      h2,
      .fc-widget-content {
        color: @text;
      }
      .fc-view {
        background-color: @base;
        * {
          border-color: transparent;
        }
      }
      .fc-state-default {
        color: @text;
      }
      .fc-toolbar {
        border-color: @surface1;
      }
    }
    #calendar-list-holder {
      background-color: @base;
    }
    #calendars-context-list .context_list_context:hover,
    #other-calendars-context-list .context_list_context:hover {
      background-color: mix(@overlay2, @base, 20%);
    }
    #undated-events {
      background-color: @base;
      .event {
        background-color: @base;
      }
    }

    .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" fill="@{text}"><polygon xmlns="http://www.w3.org/2000/svg" points="52,256 460,512 460,0"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
    }

    .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" fill="@{text}"><polygon points="460,256 52,0 52,512"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
    }

    /* INBOX */
    [data-testid="tool-bar"] {
      background-color: @mantle;
      border-color: @surface2;
      button {
        .neutral-button();
      }
    }
    button[data-testid="address-button"] {
      .neutral-button();
    }
    svg[name="IconEmail"] {
      color: @text;
    }

    /* left side */
    [data-testid="conversation"] {
      border-color: @surface1;
      span[class$="badge"] {
        color: @text;
        background-color: @surface1;
      }
    }
    #inbox-conversation-holder > div > div > div {
      /* each email entry */
      border-color: @surface2;
      div[style~="background-color:"] {
        background-color: mix(@base, @accent, 90%) !important;
      }
      div[style~="box-shadow:"] {
        box-shadow: @accent -4px 0 0 inset !important;
      }

      button[data-testid$="read-badge"] {
        &::before {
          border-color: @blue;
        }
        span svg {
          color: @accent;
        }
      }
      button[data-testid="visible-not-starred"],
      button[data-testid="visible-starred"] {
        .flush-button();
      }
    }
    [data-testid="unread-badge"] span svg {
      color: @accent;
    }
    [data-testid="ic-blue-unread-badge"] span {
      background-color: @accent;
    }

    /* right side */
    span:has(> #inbox-conversation-holder) + span {
      > div > div {
        border-color: @surface1;
      }
      button {
        .flush-button();
      }
    }
    /* compose message overlay */
    span[data-testid="compose-modal-desktop"] {
      background-color: @surface0;
      border-color: @surface1;
      span[class$="view"]:has(label[for^="TextArea"]) {
        border-color: @surface1;
        textarea {
          color: @text;
        }
      }
      span[data-testid="past-messages"] div[class$="view"] {
        border-color: @surface1;
      }
      > div[class$="modalBody"] {
        button {
          .neutral-button();
        }
      }
      > div[class$="modalFooter"] {
        #send-message-button {
          .accent-button();
        }
      }
    }

    /* COURSE CONTENT (QUIZZES, ETC) */
    #assignment_show .student-assignment-overview {
      border-color: @surface1;
    }

    #assignment_show .description.teacher-version {
      border-color: @surface2;
    }

    .assignment_header,
    #assignment_student_details,
    .quiz-header {
      border-color: @surface2;
    }

    span:has(> [class$="fileDrop__labelContent"]) {
      [class$="fileDrop__labelContent"] {
        border-color: @overlay1;
        &:hover {
          border-color: @accent;
        }
      }
      [class$="fileDrop__layout"] * {
        background-color: transparent;
      }
      label > span::before {
        border-color: @accent;
      }
    }

    .question.fill_in_multiple_blanks_question .answer_group,
    .question.multiple_dropdowns_question .answer_group {
      border-color: @surface1;
    }
    .quiz-submission,
    .question_editing {
      background-color: @base;
      border-color: @base;
    }
    .score_value {
      color: @subtext1;
    }
    .question {
      background-color: transparent;
    }
    .quiz_comment {
      border-color: @surface1;
      background-image: linear-gradient(to bottom, @base, @surface0);
      &::before {
        border-bottom-color: @surface1;
      }
      &::after {
        border-bottom-color: @base;
      }
    }
    #quiz_show {
      ul#quiz_student_details {
        border-color: @surface1;
      }
      .description.teacher-version {
        border-color: @surface2;
      }
    }
    .catppuccin_answer_arrow(@color, @filter) {
      color: @mantle;
      background-image: none;
      text-shadow: none;
      background-color: @color;
      &::before,
      &::after {
        filter: @filter;
      }
    }
    .answer_arrow.correct {
      .catppuccin_answer_arrow(@green, @green-filter);
    }
    .answer_arrow.info {
      .catppuccin_answer_arrow(@text, @text-filter);
    }
    .answer_arrow.incorrect {
      .catppuccin_answer_arrow(@red, @red-filter);
    }
    #questions.assessment_results .question .answers .answer.wrong_answer {
      border-color: @red;
    }
    #questions.assessment_results
      .question
      .answers
      .answer.wrong_answer
      .ui-selectmenu-status {
      color: @red;
    }

    .muted-notice {
      background-color: @surface0;
      background-image: linear-gradient(to bottom, @base, @surface0);
      text-shadow: @base 1px 1px 1px;
      border-color: @surface2;
    }
    .alert {
      background-color: fade(@red, 15%);
      span {
        color: @red;
      }
    }
    .icon-warning {
      color: @red;
    }

    .ic-Table {
      td,
      th.ic-Table--header-row {
        border-color: @surface1;
      }
    }
    table.summary {
      td,
      tbody th {
        background-color: @base;
        border-color: @surface1;
      }
    }
    ul#question_list {
      li.answered a {
        color: @lavender;
      }
      li.marked {
        &::before {
          content: url("/dist/images/flagged_question-e2565888dd.png");
          filter: @yellow-filter;
        }
        padding-left: 6px;
        background-image: none;
      }
      li i {
        /* question mark icons */
        color: @subtext0;
      }
    }
    #questions {
      background-color: @base;
      .ambrosiaContainerComponent * {
        color: @text;
      }
      .question {
        border-color: @surface1;
        .flag_question {
          filter: @blue-filter;
        }
        &.marked .flag_question {
          filter: @yellow-filter;
        }
        .header {
          background-color: @surface0;
          border-color: @surface1;
          .question_points_holder {
            color: @subtext0;
          }
        }
      }
      .text {
        background-color: @base;
      }
      .answers .answer {
        border-color: @surface1;
      }
    }
    .form-actions {
      border-color: @surface1;
    }
    #last_saved_indicator {
      color: @subtext1;
    }
    .ui-tooltip {
      &::before {
        border-color: transparent transparent @surface0;
      }
      &.horizontal::before {
        border-color: transparent @surface0 transparent transparent;
      }
      background-color: @surface0;
    }

    .module-sequence-footer .module-sequence-footer-content {
      background-color: @base;
      border-color: @surface1;
      a {
        .neutral-button();
      }
    }

    /* submitting */
    #tinymce-parent-of-submission_body {
      .canvas-rce__skins--root,
      * {
        color: @text;
      }
    }
    .border {
      border-color: @surface1;
    }

    /* submission details */
    .submission-details-container {
      border-color: @surface1;
    }
    .submission-details-comments {
      .comment_author_and_date {
        color: @subtext0;
      }
      .comments {
        border-color: @surface1;
        background-color: @surface0;
        /* To style only the background-image, we move the background-image to ::before and then tweak the styles. */
        a.media-comment {
          padding: 0;
          background-image: none;
        }
        a.media-comment::before {
          padding: 0 5px 0 0;
          display: inline-block;
          transform: translateY(2px) !important;
          content: url("/dist/images/audio_comment-eeb35d0efe.gif");
          filter: @text-filter;
        }
      }
    }
    .file-upload-submission {
      background-color: @surface0;
    }
    .submission-details-header__heading-and-grades {
      border-color: @surface1;
    }
    .comment {
      color: @text !important;
    }
    /* text editor */
    .tox {
      * {
        color: @text;
      }
      .tox-edit-area.active,
      .tox .tox-edit-area.active iframe {
        border-color: @accent;
      }
      .tox-split-button .tox-tbtn.tox-split-button__chevron {
        background-color: transparent;
      }
      .tox-tbtn:focus,
      .tox-split-button:focus {
        background-color: fade(@overlay2, 50%);
        color: @subtext0;
        fill: @subtext0;
        box-shadow: 0 0 0 2px @accent;
      }
      .tox-tbtn,
      .tox-split-button,
      .tox-tbtn.tox-tbtn--enabled,
      .tox-split-button .tox-tbtn.tox-split-button__chevron {
        &:hover,
        &:active {
          background-color: @surface0;
          color: @subtext0;
          svg {
            fill: @subtext0;
          }
        }
      }
      .tox-tbtn.tox-tbtn--enabled::after {
        color: @accent;
      }

      .tox-mbtn:hover:not(:disabled),
      .tox-mbtn:hover:not(:disabled, .tox-mbtn--active) {
        background-color: @hover-button;
      }
      .tox-mbtn--active {
        background-color: @hover-button;
      }

      .tox-toolbar,
      .tox-toolbar__overflow,
      .tox-toolbar__primary,
      .tox-editor-header,
      .tox-menubar,
      .tox-menubar__primary,
      .tox-menubar-overlord {
        background-color: @base;
      }
      .tox-pop {
        &::after {
          border-bottom-color: @surface0;
        }
        .tox-pop__dialog {
          background-color: @surface0;
        }
      }
      .tox-toolbar__group::after {
        border-color: @surface2;
      }
      svg,
      #Fill-1,
      .tox-icon g {
        fill: @text;
      }
      button[title="Embed Lucid Document"] image {
        filter: @text-filter;
      }
      button[title="Embed"] svg path {
        fill: @text;
      }
      .tox-menu {
        background-color: @surface0;
        border-color: @surface1;
        .tox-collection__item {
          color: @text;
        }
      }
      .tox-mbtn:focus:not(:disabled) {
        box-shadow: 0 0 0 2px @accent;
      }
      .tox-collection--list .tox-collection__group {
        border-color: @surface1;
      }
      .tox-collection--list
        .tox-collection__item--active:not(
          .tox-collection__item--state-disabled
        ),
      .tox-collection__item--active {
        background-color: mix(@accent, @base, 30%);
      }
      .tox-collection--list .tox-collection__item--enabled {
        background-color: @surface1;
      }
      .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
        fill: @text;
      }
    }
    .canvas-rce__skins--root {
      background-color: @base;
    }

    /* equation editor */
    span[aria-label="Equation Editor"] {
      div[class$="panel"] button {
        .neutral-button();
      }
      textarea,
      math-field {
        color: @text;
        border-color: @surface2 !important;
      }
      [data-testid="mathml-preview-element"] {
        color: @text;
      }
      button[data-testid="equation-editor-modal-done"] {
        .accent-button();
      }
    }

    #rubrics {
      .rubric_title {
        background-color: @surface0;
        border-color: @surface1;
      }
      .rubric_container {
        thead th {
          background-color: @surface0;
          border-color: @surface1;
        }
        .ratings * {
          border-color: @surface1;
        }
      }
      .rubric-footer {
        border-color: @surface1;
      }
    }

    /* discussions */
    .headerBar {
      background: @surface0;
      border-color: @surface1;
    }
    .alert-info {
      background-color: @surface0;
      color: @blue;
      * {
        color: @blue;
      }
    }
    .topic .entry-content {
      border-color: @surface1;
    }
    .new-and-total-badge .new-items {
      color: @base;
    }
    .discussion_entry > .discussion-entry-reply-area {
      border-color: @surface1;
    }
    .discussion-reply-box {
      background-color: @surface0;
      border-color: @surface1;
    }
    .al-options {
      background-color: @surface0;
      border-color: @surface1;
    }

    .ic-discussion-row,
    .pinned-discussions-v2__wrapper,
    .unpinned-discussions-v2__wrapper,
    .discussions-v2__container-image,
    .closed-for-comments-discussions-v2__wrapper {
      border-color: @surface1;
      background-color: @base;
    }
    .discussions-v2__container-image {
      color: @text;
    }
    .ic-discussion-row {
      box-shadow: -1px -1px @surface1, inset -1px -1px @surface1;
    }
    .discussion-entries {
      background-color: @base;
      .discussion_entry,
      .toolbarView,
      .entry {
        background-color: @base;
        border-color: @surface1;
        .entry-content {
          background-color: @base;
        }
      }
      time {
        color: @subtext0;
      }
    }

    /* new discussion redesign */
    .discussion-redesign-layout {
      div[data-drawer-content^="DrawerLayout"] {
        /* the header with the search bar */
        > span > div:first-child {
          background-color: @base;
        }
      }
      div[data-testid="discussion-topic-container"] > span > div {
        border-color: @surface1;
      }
      .discussion-post-manage-discussion path {
        color: @text;
      }
    }

    #DrawerLayoutTray {
      /* split screen layout */
      background-color: @base;
      border-color: @surface1;
    }
    button[class$="baseButton"]:has(svg[name="IconX"]) {
      .flush-button();
    }
    button[class$="baseButton"]:has(svg[name="IconMore"]) {
      .flush-button();
    }

    .communication_message {
      border-color: @surface1;
    }
    .communication_message div.header {
      color: @subtext0;
    }
    span:has(> [data-testid="DiscussionEdit-container"]) {
      background-color: @base;
    }
    [data-testid="RCEStatusBar"] {
      color: @subtext0;
      button {
        .flush-button();
      }
      > span > div {
        border-color: @surface1 !important;
      }
      [data-btn-id="rce-editormessage-btn"] {
        .neutral-button();
      }
    }
    button[data-testid="attach-btn"] > span {
      color: @text;
    }
    .ic-discussion-content-container > span > span:last-child {
      color: @text;
    }
    .discussions-container__wrapper [class$="summaryText"] {
      color: @text;
    }
    .ic-unread-badge__unread-count {
      color: @mantle;
    }
    .ic-unread-badge__total-count {
      background-color: @surface1;
    }
    hr[data-testid="post-separator"] {
      border-color: @surface1 !important;
    }
    .searchButton__container button,
    .discussions-index-manage-menu > button {
      .neutral-button();
    }
    #add_discussion {
      .accent-button();
    }
    .discussions-editor + div {
      button[data-testid="attach-btn"] {
        .flush-button();
      }
      .discussions-editor-cancel button {
        .neutral-button();
      }
      .discussions-editor-submit button {
        .accent-button();
      }
    }
    .discussion-topic-reply-button button {
      .accent-button();
    }
    .discussion-post-manage-discussion button {
      .flush-button;
    }
    .discussion-post-subscribe button {
      .flush-button();
    }
    button[data-testid="splitscreenButton"],
    button[data-testid="ExpandCollapseThreads-button"] {
      .neutral-button();
    }

    /* author profile picture placeholder */
    [data-testid="author_avatar"] {
      background-color: @surface0;
      border-color: @overlay2;
      span {
        color: @accent;
      }
    }
    /* unread badges */
    .unread_dot,
    #grades_summary .unread_dot,
    [data-testid="is-unread"] [class$="badge"] {
      background-color: @accent;
    }

    /* Enhanced Assigments UI */

    #assignments-student-footer {
      background-color: @mantle !important;
      border-top-color: @surface1 !important;

      #submit-button > span {
        background-color: @accent;
        color: @crust;
      }
    }

    /* Assignment status green text and circle */
    [color="success"] {
      color: @green;
    }

    [class*="progressCircle__track"] {
      stroke: @surface1 !important;
    }
    [class*="progressCircle__meter"] {
      stroke: @green !important;
    }

    /* Upload files button */
    .submission-type-icon-contents {
      &:has(svg[name="IconUpload"]) {
        background-color: @accent;

        svg[name="IconUpload"] {
          fill: @crust !important;
        }
      }

      border-color: @accent;

      &:has(svg[name="IconMore"]) {
        background-color: @base;

        svg[name="IconMore"] {
          fill: @accent !important;
        }
      }
    }
    [color="primary-inverse"] {
      color: @crust;
    }

    /* Upload files panel */
    [style*="background-color: rgb(245, 245, 245);"] {
      background-color: @surface0 !important;
    }
    div[style]:has(> div > [data-testid="upload-pane"]) {
      border-top-color: @surface2 !important;

      label[for="inputFileDrop"] {
        [class*="fileDrop__labelContent"] {
          border-color: @overlay1;
        }
        div:has(> [class*="-screenReaderContent"]) {
          background-color: @base;
        }
      }

      div:has(> [class*="block-baseButton"]) {
        background-color: @base;
        border-color: @surface1;
        [class*="block-baseButton"]:hover > [class$="-baseButton__content"] {
          background-color: @surface0;
        }

        img {
          filter: @text-filter;
        }
        svg[name="IconFolder"] {
          color: @text;
        }
      }
    }
    button[id^="webcam"] {
      .neutral-button();
    }

    /* GRADES */
    .ic-Table th {
      border-color: @surface2;
    }
    .ic-Table.ic-Table--hover-row tbody tr {
      &:hover,
      &.ic-Table__row--bg-neutral:hover,
      &.ic-Table__row--bg-success:hover,
      &.ic-Table__row--bg-alert:hover,
      &.ic-Table__row--bg-danger:hover {
        background-color: @hover-accent;
      }
    }
    .react-rubric * {
      color: @text;
      border-color: @surface1;
      background-color: transparent;
    }
    .react-rubric .rating-tier.selected {
      .meetsMasteryShader {
        background-color: @green;
        .triangle {
          color: @green;
          background-color: transparent;
        }
      }
      .nearMasteryShader {
        background-color: @yellow;
        .triangle {
          color: @yellow;
          background-color: transparent;
        }
      }
      .wellBelowMasteryShader {
        background-color: @red;
        .triangle {
          color: @red;
          background-color: transparent;
        }
      }
    }

    #grades_summary {
      th.title {
        border-color: @surface1;
      }
      tr.final_grade {
        border-color: @surface2;
      }
      a[role="button"] {
        .neutral-button();
      }
    }

    .ic-Form-control.ic-Form-control--checkbox .ic-Label::before {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 16 48" width="16" height="48" enable-background="new 0 0 16 48" xml:space="preserve"><polyline fill-rule="evenodd" clip-rule="evenodd" fill="@{base}" points="11.4,4 6.9,8.7 4.6,6.2 3,7.9 6.9,12 13,5.6 11.4,4"/><polyline fill-rule="evenodd" clip-rule="evenodd" fill="@{text}" points="11.4,20 6.9,24.7 4.6,22.2 3,23.9 6.9,28 13,21.6 11.4,20"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
      background-color: @surface0;
      border-color: @surface2;
    }
    .selected-assignment {
      background-color: @hover-accent;
    }
    [data-id="submissions-comments-tray"] {
      background-color: @mantle;
      div:has(> a[class$="Button"]) {
        color: @text;
        background-color: @surface0;
      }
    }
    #apply_select_menus {
      .accent-button();
    }
    #GradeSummarySelectMenuGroup label > span {
      color: @text;
    }

    /* PEOPLE */
    .ic-Table.ic-Table--striped tbody tr:nth-child(odd) {
      background-color: @mantle;
    }

    /* COURSE NOTIFICATIONS MENU */
    table[class$="view-table"],
    table[class$="view-table"] :is(tr, th, td) {
      background-color: @base;
    }
    thead > tr[class$="view-row"] {
      border-color: @surface2;
    }
    .notifications tr > th span {
      color: @text;
    }

    /* SYLLABUS */
    #syllabus tr.date.related td,
    #syllabus tr.date.related th,
    #syllabus tr.date.selected td,
    #syllabus tr.date.selected th {
      background-color: @hover-accent;
    }
    #syllabus tr.date.date_passed td,
    #syllabus tr.date.date_passed th {
      background-color: @mantle;
    }
    #syllabus tr.detail_list td.not_last {
      border-color: @surface0;
    }
    #immersive_reader_mount_point button,
    #immersive_reader_mobile_mount_point button {
      .neutral-button();
    }

    .mini_calendar {
      .day {
        color: @subtext0;
      }
      .day.has_event {
        background-color: @surface0;
      }
      .day.today {
        background-color: mix(@red, @surface0, 10%);
      }
    }
    .mini-cal-header {
      border-color: @surface1;
    }

    /* FILES */
    .ef-header,
    .ef-directory-header,
    .ef-footer,
    .ef-main .ef-folder-content {
      border-color: @surface1;
    }
    .ef-item-row:hover {
      background-color: @hover-regular;
    }
    .ef-item-row.ef-item-selected {
      background-color: @hover-regular;
    }
    .ef-file-preview-header {
      color: @text;
      background-color: @mantle;
    }
    .ef-file-preview-header > * {
      border-color: @surface1;
    }
    .ef-file-preview-button {
      color: @subtext0 !important;
    }
    .ViewerControls {
      background-color: @surface1;
    }
    .ViewerControls--current-page {
      color: @text;
    }
    .AnnotationControlButton,
    .AnnotationControlButton-outer {
      background-color: @surface1;
      border-color: @surface1;
    }
    .mimeClass-folder {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="36" viewBox="0 0 28 36"><title>folder</title><path d="M14.43 10.81 11.23 6H.43v21.58A2.4 2.4 0 0 0 2.82 30h22.36a2.4 2.4 0 0 0 2.4-2.4V10.81ZM26 27.58a.8.8 0 0 1-.8.8H2.82a.8.8 0 0 1-.8-.8v-20h8.35l2.13 3.19H3.62v1.6H26Z" fill="@{text}" fill-rule="evenodd"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
    }
    .ef-big-icon {
      filter: @text-filter;
    }
    .al-trigger-gray {
      color: @overlay1;
    }

    /* CHAT */
    /* this has terrible autogenerated css class names */
    .ctf-container > *,
    .ctf-container {
      background-color: @base;
    }
    .ctf-header,
    .header-contents {
      border-color: @surface1;
    }
    .header-contents span {
      color: @text;
    }
    .ding-toggle {
      label:has(svg[name="IconCheck"]) > span > span {
        background-color: @green;
      }
    }
    .ctf-message-input {
      background-color: @base;
    }
    .ctf-message-input .ctf-message-input__wrapper {
      background-color: @surface0;
      border-color: @surface2;
      input {
        background-color: transparent;
      }
    }

    /* LOGIN PAGE */

    .ic-flash-info,
    .ic-flash-success,
    .ic-flash-warning,
    .ic-flash-error {
      background-color: @surface0;
    }

    /* ACCOUNT PAGE */
    th[class$="colHeader"] {
      color: @text;
    }
    .feature-flag-wrapper {
      tr span[class$="Text"] {
        color: @text;
      }
    }

    /* CREATOR SIDE */
    /* not prioritized in this userstyle */

    /* DASHBOARD */
    .unpublished_courses_redesign .ic-DashboardCard__box__header {
      background-color: transparent;
      border-color: @surface1;
    }
    /* MODULES */
    .module-publish-icon {
      button > span {
        background-color: transparent;
      }
      button:hover > span {
        background-color: @hover-button;
      }
    }
    .NewUserTutorialTray__Content > div > * {
      border-color: @surface1;
    }
    .slick-header-column {
      background-color: @surface0;
    }
    .slick-header-column.ui-state-default {
      border-color: @surface1;
    }
    /* PAGES */
    button[class$="tag"] {
      background-color: @surface0;
      border-color: @surface1;
      color: @text;
      &:hover {
        background-color: @surface1;
      }
      svg {
        fill: @text;
      }
    }

    /* GRADEBOOK */
    .ui-state-default,
    .ui-widget-header {
      color: @subtext1;
    }
    button[data-testid="gradebook-settings-button"] {
      .neutral-button();
    }
    #gradebook-assignment-search,
    #gradebook-student-search {
      label span {
        color: @subtext1;
      }
    }

    /* OUTCOMES */
    #outcome_management {
      footer {
        color: @text;
        background-color: @base !important;
      }
    }
    #management > div {
      color: @subtext1;
    }
    .management-panel {
      div[data-testid="outcome-group-container"] [class$="view"] {
        border-color: @surface1;
      }
      svg {
        fill: @text;
      }
    }
    div[role="separator"] > div {
      background-color: @surface0 !important;
    }
    span[class$="view-heading"],
    h2,
    h2 > span[class$="text"] {
      color: @subtext1;
    }
    span[class$="billboard__message"],
    h3,
    h3 > span[class$="text"] {
      color: @subtext0;
    }
    span[class$="billboard"] {
      background-color: transparent;
    }

    /* DISCUSSIONS */
    /* create discussion page */
    .discussions fieldset span:has(> button[data-testid="save-button"]) {
      border-color: @surface1;
    }
    #manage-assign-to-container div[data-testid="item-assign-to-card"] {
      border-color: @surface1;
    }

    /* STUDIO */
    #settings_page_wrapper,
    #collection_shared_content,
    #collection_user_content {
      background-color: @base;
      span[role="contentinfo"] {
        border-color: @surface1;
      }
    }
    .CollectionShow__mediaListWrapper {
      img {
        background-color: transparent;
      }
    }
    .DefaultLayout__main {
      color: @text;
    }
    h1 {
      color: @text;
    }
    #lti_media_picker {
      nav {
        background-color: @mantle;
        border-block-end-color: @surface0;
      }
      ul a[class$="Button"] div {
        color: @text;
      }
      li div[class$="topNavBarItem__container"]::after {
        background-color: @surface1;
      }
    }
    #media_upload_holder button img {
      filter: @text-filter;
    }
    span[class$="toggleDetails__summary"] > span {
      color: @text;
    }
    div[class$="toggleDetails__details"] {
      color: @text;
    }

    /* ASSIGNMENT CREATION */
    .page-action-list a {
      border-bottom-color: @surface1;
    }

    /* EXTENSIONS */
    /* BetterCampus */
    --bcsidebar-selection: @accent;
    --bcbackground-0-ungradient: @base;
    --bcbackground-0: @base;
    --bcbackground-1-ungradient: @surface0;
    --bcbackground-1: @surface0;
    --bcbackground-2-ungradient: @surface1;
    --bcbackground-2: @surface1;
    --bcborders-ungradient: @surface0;
    --bcborders: @surface0;
    --bclinks-ungradient: @blue;
    --bclinks: @blue;
    --bctext-0-ungradient: @text;
    --bctext-0: @text;
    --bctext-1-ungradient: @subtext0;
    --bctext-1: @subtext0;
    --bctext-2-ungradient: @subtext1;
    --bctext-2: @subtext1;
    --bccards-ungradient: @surface0;
    --bccards: @surface0;
    --bcshadow: 0 0 10px 0 transparent;
  }
}