.downloads-widget-table {
  /*Set Header static and overflow body instead*/
  display: flex;
  height: 100%;
  flex-direction: column;
  .mantine-Table-tbody {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: 0;
  }
  /*Hide scrollbar until I can apply an overlay scrollbar instead*/
  .mantine-Table-tbody::-webkit-scrollbar {
    width: 0;
  }
  /*Properly size header*/
  .mrt-table-head-cell-labels {
    min-height: var(--ratioWidth);
    gap: 0;
    padding: 0;
  }
  /*Properly size controls*/
  .mrt-grab-handle-button {
    margin: unset;
    width: var(--dragButtonSize);
    min-width: var(--dragButtonSize);
    height: var(--dragButtonSize);
    min-height: var(--dragButtonSize);
  }
  .mrt-table-head-sort-button {
    margin: unset;
    width: var(--sortButtonSize);
    min-width: var(--sortButtonSize);
    height: var(--sortButtonSize);
    min-height: var(--sortButtonSize);
  }
}

/*Make background of component different on hover, depending on base var*/
.hoverable-component {
  &:hover {
    background-color: rgb(from var(--background-color) calc(r + 10) calc(g + 10) calc(b + 10) / var(--opacity));
  }
}

/*Make background of component different on click, depending on base var, inverse of hover*/
.clickable-component {
  &:active {
    background-color: rgb(from var(--background-color) calc(r - 10) calc(g - 10) calc(b - 10) / var(--opacity));
  }
}

/*FadingGlowing effect for text that updates, add className and put the updating value as key*/
@keyframes glow {
  from {
    text-shadow: 0 0 var(--glow-size) var(--mantine-color-text);
  }
  to {
    text-shadow: none;
  }
}

.text-flash {
  animation: glow 1s ease-in-out;
}

/*To apply to any ScrollArea that we want to flex. Same weird workaround as before*/
.flexed-scroll-area {
  height: 100%;
  .mantine-ScrollArea-viewport {
    & div[style="min-width: 100%; display: table;"] {
      display: flex !important;
      height: 100%;
    }
  }
}