@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

/*------------------------------------*\
    # Typography Variables
\*------------------------------------*/
/*
*******************************************************************************************
* Mixins and functions                                                                    *
*******************************************************************************************

*/
/**
This addresses a compiler warning regarding the no-select mixin.
*/
@keyframes buttonIsLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/*
  Do not attempt to set color variables in this file.
  This file is used only to set SCSS color variables as rgb variations of CSS variables.
  The CSS variables are set outside of this project, based on a theme configuration from the backend.
  - Robert Merki, August 2019
*/
/* Mobile devices */
/* iPads, Tablets */
/* Small screens, laptops */
/* Desktops */
/* Large screens */
/* Extra large screens, TV */
.ButtonRow {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ButtonRow--hasGap {
  gap: 1rem;
}
.ButtonRow--alignLeft {
  justify-content: flex-start;
  margin-right: auto;
}
.ButtonRow--alignLeft > *:not(.ButtonRow) {
  margin-right: 10px;
}
.ButtonRow--alignLeft > *:first-child:not(.ButtonRow) {
  margin-left: 0;
}
.ButtonRow--alignRight {
  justify-content: flex-end;
  margin-left: auto;
}
.ButtonRow--alignRight > *:not(.ButtonRow) {
  margin-left: 10px;
}
.ButtonRow--alignRight > *:last-child:not(.ButtonRow) {
  margin-right: 0;
}
.ButtonRow--alignBottom {
  align-items: flex-end;
}
.ButtonRow--alignTop {
  align-items: flex-start;
}
.ButtonRow--alignCenter {
  align-items: center;
}
.ButtonRow--justifyCenter {
  justify-content: center;
}
.ButtonRow--padded {
  padding-top: 20px;
}
.ButtonRow--isGutter {
  background: rgb(var(--color-gray-100));
  margin: 20px -20px -20px -20px !important;
  padding: 20px;
}
.ButtonRow--spacingTop {
  margin-top: 10px;
}
.ButtonRow--spacingBottom {
  margin-bottom: 10px;
}
.ButtonRow--spaceBetween {
  justify-content: space-between;
}

.dark-mode .ButtonRow--isGutter {
  background: rgba(var(--color-white), 0.05);
}