/*

GLUE Tokens - DLS

The contents of this file is owned and generated by the DLS team.
If you require changes making to the values stored here please reach out
to @dls on Slack.

Links:

- Source: https://ghe.spotify.net/design/glue-tokens
- Documentation: https://ghe.spotify.net/design/glue-tokens

Tack!

The DLS Team

*/
/**
 * Spoticons
 *
 * Variable Set: Spoticons
 *
 * Styleguide 1.2.1
 */
/**
 * Common color usages
 *
 * These colors are provided because they might be needed in many places where
 * they should be synced up.
 */
/**
 * Vertical Grid System
 * --------------------
 *
 * We try to adhere to a baseline grid, which is a vertical grid with lines
 * every X pixels. The baseline of text should always fall on this line.
 */
/**
 * Horizontal Grid System
 * ----------------------
 *
 * This grid system is responsive in four sizes, where all sizes use a 12 column
 * grid.
 *
 * Since the values are calculated, you need to compile the Less code to see the
 * values. From glue, run `node tools/output-grid-values.js` to see
 * the values.
 *
 * Here's a reference for what to use the variables for:
 *
 * Min Width (including scroll bar)
 * --------------------------------
 * Including scroll bar:  $glue-screen-min
 * Excluding scroll bar:  $glue-body-width-min
 *
 * Max Width (of content, space on the sides)
 * ------------------------------------------
 * Including scroll bar:  $glue-screen-max
 * Excluding scroll bar:  $glue-body-width-max
 *
 * Page Gutter (gutter on the sides of the page)
 * ---------------------------------------------
 * Size:                  $glue-grid-page-gutter
 *
 * Extra Small (xs)
 * ----------------
 * Gutter size:           $glue-grid-column-gutter-xs
 * View width range:      $glue-screen-min to $glue-screen-xs-max
 *
 * Small (sm)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-sm
 * View width range:      $glue-screen-sm-min to $glue-screen-sm-max
 *
 * Medium (md)
 * -----------
 * Gutter size:           $glue-grid-column-gutter-md
 * View width range:      $glue-screen-md-min to $glue-screen-md-max
 *
 * Large (lg)
 * ----------
 * Gutter size:           $glue-grid-column-gutter-lg
 * View width range:      $glue-screen-lg-min to $glue-screen-lg-max
 */
.context-menu-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/**
 * 1. This creates a stacking context, which forces the scroll bar to be
 *    rendered on top of any content (the scroll bar is added through the JS
 *    by adding `overflow-y: scroll` when items don't fit).
 */
.context-menu {
  padding: 8px 0;
  position: absolute;
  display: none;
  width: auto;
  min-width: 160px;
  max-width: 350px;
  color: var(--modspotify_secondary_fg);
  background-color: var(--modspotify_main_bg);
  box-shadow: 0 4px 12px 4px rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.5);
  border-radius: 8px;
  isolation: isolate;
  /* [1] */
}

.scrollbar-style-visible-mac .context-menu::-webkit-scrollbar-track,
.scrollbar-style-visible-windows .context-menu::-webkit-scrollbar-track {
  background-color: var(--modspotify_main_bg);
}

.scrollbar-style-visible-mac .context-menu::-webkit-scrollbar-button,
.scrollbar-style-visible-windows .context-menu::-webkit-scrollbar-button {
  background-color: var(--modspotify_main_bg);
}

.body-container--windows .context-menu,
.body-container--linux .context-menu {
  border-radius: 0;
}

.context-menu .item {
  padding: 7px 34px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  line-height: 18px;
}

.context-menu .sep {
  display: block;
  margin: 4px 0;
  height: 1px;
  background-color: var(--modspotify_slider_bg);
}

.context-menu .item.disabled {
  opacity: 0.4;
}

.context-menu .filter-search {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  width: 0;
  opacity: 0;
}

.context-menu .filter-search input:focus {
  outline: 0;
}

.context-menu .item.with-icon {
  padding-left: 12px;
}

.context-menu .item.with-icon::before {
  padding-right: 6px;
}

.context-menu .item.with-icon-svg::before {
  content: '';
  background-image: var(--svg-icon);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  position: relative;
  top: 1px;
}

.context-menu .item span {
  pointer-events: none;
}

.context-menu .item.secondary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 10px;
}

.context-menu .item.secondary .text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-menu .item.secondary .secondary {
  margin-left: 20px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.context-menu .filtered {
  display: none;
}

.context-menu .item .highlight {
  background-color: var(--modspotify_miscellaneous_bg);
  color: var(--modspotify_main_fg);
  padding: 0 3px;
  border-radius: 2px;
}

.context-menu .item.parent::after {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f110";
  display: block;
  position: absolute;
  right: 24px;
  top: 8px;
  width: 0;
  height: 0;
}

.context-menu .item.hover:not(.disabled) {
  background-color: var(--modspotify_slider_bg);
  color: var(--modspotify_main_fg);
  cursor: default;
}

.context-menu .item.active {
  background-color: var(--modspotify_slider_bg);
  color: var(--modspotify_main_fg);
}

.context-menu .item:last-child {
  border: 0;
}

.app-header {
  position: relative;
  z-index: 2;
}

.app-content {
  position: relative;
  z-index: 1;
  will-change: transform;
}

.profile-section {
  contain: paint;
}

.profile {
  margin: 0 auto;
}

.profile > .error {
  margin-top: 40px;
}

.profile > .playlists,
.profile > .recent-artists,
.profile > .followers,
.profile > .following {
  display: none;
}

.media-info.has-meta.has-subtitle {
  min-height: 9em;
}

.no-section-divider {
  padding-top: 32px;
}

.header-media {
  position: relative;
}

.media-image-edit:hover {
  opacity: 1;
}

.overlay {
  display: none;
}

.overlay.show {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background-color: rgba(var(--modspotify_rgb_cover_overlay_and_shadow),0.7);
}

.section-throbber {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

.loading-playlists {
  margin-bottom: 20px;
}

.legal-permission {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  display: inline-flex;
  width: 80%;
  height: 32px;
  align-items: center;
}

.profile-controllers {
  display: flex;
}

.following .list-group-item {
  border-top: 0;
}

.followers .list-group-item {
  border-top: 0;
}

.loading-playlists-throbber {
  margin: 0 auto;
}

.empty-state {
  margin-top: 30px;
}

.empty-state i {
  color: var(--modspotify_secondary_fg);
  line-height: 68px;
}

.empty-state i::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\F28A";
  font-size: 64px;
  line-height: inherit;
}

.empty-state .message {
  text-align: center;
  padding: 50px 0;
}

/* Investigate: It's a bit mysterious that we need to declare this, because
this is what is declared in the context menu default CSS. */
#context-menu-container {
  z-index: 2147483647;
}

.error-and-offline {
  display: block;
}

.error-and-offline .error-content,
.error-and-offline .offline-content {
  display: block;
}

.glue-page-header__content .glue-page-header__image:hover .background-stripe {
  opacity: 0.7;
}

.glue-page-header__content .glue-page-header__image:hover .add-image-label {
  color: var(--modspotify_main_fg);
}

.glue-page-header__content .glue-page-header__image:hover .display-hover {
  opacity: 1;
}

.glue-page-header .card-type-user {
  -webkit-clip-path: circle(50% at center);
}

.header-verified-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-left: 8px;
  border-radius: 100px;
  background-color: var(--modspotify_miscellaneous_bg);
  color: var(--modspotify_main_fg);
}

.header-verified-check::before {
  font-family: "glue-spoticon";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: inherit;
  vertical-align: bottom;
  content: "\f10a";
  font-size: 12px;
  line-height: inherit;
}

/* 
REDDIT
*/

#reddit-option {
  height: 290px;
}

#reddit-subreddit {
  height: 290px;
}

#reddit-subreddit-list {
  margin-top: 10px;
  height: 270px;
  overflow: scroll;
}

.popover-footer {
  padding: 9px 14px;
}

.setting-row::after {
  content: "";
  display: table;
  clear: both;
}

.setting-row .col {
  padding: 10px 0;
  vertical-align: middle;
}

.setting-row .col.description {
  float: left;
  padding-right: 15px;
  cursor: default;
}

.setting-row .col.action {
  float: right;
  text-align: right;
}

h4 {
  padding-bottom: 5px;
}

#youtube-container {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1040;
  right: auto;
  bottom: auto;
  margin-left: -300px;
  margin-top: -169px;
  width: 600px;
  height: 338px;
  overflow: hidden;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(var(--modspotify_rgb_cover_overlay_and_shadow), 0.5);
}

.form-control {
  border-radius: 4px !important;
}

#autocomplete {
  opacity: 0;
  position: absolute;
  background-color: var(--modspotify_main_fg);
  color: var(--modspotify_main_bg);
  z-index: 1;
  width: 90%;
  border-radius: 4px;
  margin-top: 10px;
  box-shadow: 0 5px 20px rgba(var(--modspotify_rgb_cover_overlay_and_shadow), 0.5);
  transition: opacity 200ms cubic-bezier(0.3, 0, 0.7, 1);
}

#autocomplete div {
  padding: 0 10px;
  text-overflow: ellipsis; 
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  vertical-align: middle;
  line-height: 30px;
}

#autocomplete div.active {
  background-color: var(--modspotify_main_bg);
  color: var(--modspotify_main_fg);
}