@charset "UTF-8";

@eval THEME_DARKGREY_BACKGROUND org.rstudio.core.client.theme.ThemeColors.darkGreyBackground;
@eval THEME_DARKGREY_MOST_INACTIVE org.rstudio.core.client.theme.ThemeColors.darkGreyMostInactiveBackground;
@eval THEME_DARKGREY_MOST_INACTIVE_TRANSPARENT org.rstudio.core.client.theme.ThemeColors.darkGreyMostInactiveTransparentBackground;

@external macintosh, windows, forceMacScrollbars;

@external rstudio-themes-scrollbars;
@external rstudio-themes-light-menus;
@external rstudio-themes-light;
@external rstudio-themes-dark-menus;
@external rstudio-themes-dark;

@external rstudio-tutorials;
@external rstudio-tutorials-section;
@external rstudio-tutorials-container;
@external rstudio-tutorials-package;
@external rstudio-tutorials-label-container;
@external rstudio-tutorials-label;
@external rstudio-tutorials-logo;
@external rstudio-tutorials-run-container;
@external rstudio-tutorials-run-button;
@external rstudio-tutorials-run-button-label;
@external rstudio-tutorials-run-button-icon;
@external rstudio-tutorials-description;
@external rstudio-tutorials-description-empty;
@external rstudio-tutorials-sublabel;
@external rstudio-tutorials-footer;
@external rstudio-tutorials-footer-text;
@external rstudio-tutorials-install-learnr-link;
@external rstudio-tutorials-install-shiny-link;

/* Scrollbars */

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar
{
   background: #FFF;
}

.windows.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar,
.windows.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar
{
   width: 17px;
   height: 17px;
}

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-thumb,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-thumb
{
   -webkit-border-radius: 10px;
   background: THEME_DARKGREY_BACKGROUND;
}

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-track,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-track,
.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-corner,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-corner
{
   background: THEME_DARKGREY_MOST_INACTIVE;
}

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-thumb,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-thumb
{
   border: solid 3px THEME_DARKGREY_MOST_INACTIVE;
}



/* Common styles */

.rstudio-tutorials {
   margin: 8px;
   padding: 0 4px 4px 4px;
   font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.rstudio-tutorials-section {
   margin-top: 12px;
}

.rstudio-tutorials-container {
}

.rstudio-tutorials-package {
   text-align: center;
   font-size: 24px;
}
.rstudio-tutorials a {
   display: inline-block;
}

.rstudio-tutorials-run-container {
   white-space: nowrap;
}

.rstudio-tutorials-label-container {
   display: flex;
   width: 100%;
   padding: 4px;
}

.rstudio-tutorials-label {
   flex: 1;
   font-size: 16pt;
   font-weight: bold;
}

.rstudio-tutorials-description {
   padding: 4px;
}

.rstudio-tutorials-description-empty {
   font-style: italic;
}

.rstudio-tutorials-run-button {
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 0.8em;
   margin-right: 12px;
   margin-top: 3px;
   user-select: none;
}

.rstudio-tutorials-logo {
   width: 24px;
   height: 24px;
   vertical-align: middle;
}

.rstudio-tutorials-footer {
   margin-top: 12px;
}

.rstudio-tutorials-footer-text {
   margin-top: 12px;
   font-size: 12px;
}

.rstudio-tutorials-run-button:active {
   margin-top: 4px;
}

.rstudio-tutorials-run-button-icon {
   color: rgb(2, 164, 79);
   padding-left: 4px;
   font-size: 0.9em;
}

.rstudio-tutorials-sublabel {
   padding: 0 4px;
   font-size: 10pt;
   font-style: oblique;
}

/* Light styles */

.rstudio-themes-light-menus.rstudio-tutorials {
   background: white;
   color: black;
}

.rstudio-themes-light-menus .rstudio-tutorials-section {
   border-bottom: 1px dotted rgb(204, 204, 204);
}


.rstudio-themes-light-menus .rstudio-tutorials-run-button {
   background-color: white;
   color: black;
   border-top: 1px solid rgb(216, 216, 216);
   border-left: 1px solid rgb(210, 210, 210);
   border-right: 1px solid rgb(210, 210, 210);
   border-bottom: 1px solid rgb(186, 186, 186);
}

.rstudio-themes-light-menus .rstudio-tutorials-sublabel {
   color: rgb(116, 116, 116);
}

/* Dark styles */

.rstudio-themes-dark-menus.rstudio-tutorials {
   background: black;
   color: rgb(232, 232, 232);
}

.rstudio-themes-dark-menus .rstudio-tutorials-section {
   border-bottom: 1px dotted rgb(58, 72, 84);
}

.rstudio-themes-dark-menus.rstudio-tutorials a:visited {
   color: rgb(78, 131, 181);
}

.rstudio-themes-dark-menus.rstudio-tutorials a:link {
   color: rgb(118, 171, 221);
}

.rstudio-themes-dark-menus.rstudio-tutorials a:visited {
   color: rgb(78, 131, 181);
}

.rstudio-themes-dark-menus .rstudio-tutorials-run-button {
   color: rgb(232, 232, 232);
   background-color: rgb(78, 92, 104);
   border: 1px solid rgb(108, 121, 131);
}

.rstudio-themes-dark-menus .rstudio-tutorials-sublabel {
   color: rgb(172, 172, 172);
}

.rstudio-themes-dark-menus .rstudio-tutorials-install-learnr-link:link {
   color: rgb(118, 171, 221);
}

.rstudio-themes-dark-menus .rstudio-tutorials-install-shiny-link:link {
   color: rgb(118, 171, 221);
}

.rstudio-themes-dark-menus .rstudio-tutorials-description-empty {
   color: rgb(172, 172, 172);
}
