/*
  ==Theme==
  @name              Light
  @version           1.2
  @description       A brighter Flashpoint Launcher.
  @author            mathgeniuszach
  @launcher-version  alpha
  ==/Theme==
*/

:root {
  --primary:        hsl(0, 0%,  95%);
  --secondary:      hsl(0, 0%, 100%);
  --tertiary:       hsl(0, 0%, 100%);
  --highlight:      hsl(0, 0%, 100%);
  
  --dim-bright:     hsl(0, 0%,  75%);
  --dim:            hsl(0, 0%,  65%);
  --dim-dark:       hsl(0, 0%,  45%);
  
  --outline:        hsl(0, 0%,  40%);
  
  --back-primary:   hsl(0, 0%, 100%);
  --back-secondary: hsl(0, 0%, 100%);
  --back-highlight: hsl(0, 0%,  80%);
  
  --acc:            hsl(0, 0%,   0%);
  --acc-secondary:  hsl(0, 0%,  25%);
  --acc-inverted:   hsl(0, 0%, 100%);
  
  /* ------- Layout Variables ------- */
  /* Text Color */
  --layout__primary-text-color:     var(--acc);
  --layout__secondary-text-color:   var(--acc-secondary);
  --layout__highlighted-text-color: var(--acc);
  --layout__disabled-text-color:    var(--acc-secondary);
  /* Log (at the Log Page) */
  --layout__log-time-stamp:                 #645eb7;
  --layout__log-source:                     #a0a0a0;
  --layout__log-source-background-services: #5a5a5a;
  --layout__log-source-game-launcher:       #e67e22;
  --layout__log-source-language:            #b157ec;
  --layout__log-source-redirector:          #00cccc;
  --layout__log-source-router:              #00cc00;
  --layout__log-source-curation:            #bccc00;
  /* Background */
  --layout__primary-background:    var(--back-primary);
  --layout__secondary-background:  var(--primary);
  --layout__tertiary-background:   var(--secondary);
  --layout__quaternary-background: var(--tertiary);
  /* Outline Color */
  --layout__primary-outline-color: var(--outline);
  /* Scrollbar */
  --layout__scroll-thumb-color:        var(--dim-bright);
  --layout__scroll-thumb-color-hover:  var(--dim);
  --layout__scroll-thumb-color-active: var(--dim-dark);
  /* Slider */
  --layout__slider-background:        var(--dim-bright);
  --layout__slider-background-hover:  var(--dim);
  --layout__slider-background-active: var(--dim-dark);
  --layout__footer-scale-slider-icon-color:        var(--dim);
  --layout__footer-scale-slider-background:        var(--back-primary);
  /* Game Item */
  --layout__game-item-color-selected:            var(--accent-secondary);
  --layout__game-item-color-hover:               var(--accent);
   --layout__game-item-color-selected-hover:     var(--accent);
  --layout__game-list-item-background-even:      var(--back-secondary); /* Only used in "list" mode. */
  --layout__game-item-background-hover:          var(--dim-bright);
  --layout__game-item-background-selected:       var(--dim);
  --layout__game-item-background-selected-hover: var(--dim-dark);
  /* Browse Sidebar(s) */
  --layout__browse-sidebar-background:         var(--tertiary);
  --layout__browse-sidebar-divider-background: var(--back-highlight);
  /* Right Browse Sidebar */
  --layout__browse-right-sidebar-screenshot-placeholder-background: var(--back-primary);
  --layout__browse-right-sidebar-screenshot-placeholder-border:     var(--outline);
  --layout__browse-right-sidebar-searchable-hover:                  var(--dim-bright);
  /* Playlist List */
  --layout__playlist-list-item-even-background:                var(--back-secondary);
  --layout__playlist-list-fake-even-background:                var(--back-primary);
  --layout__playlist-list-item-content-background:             var(--secondary);
  --layout__playlist-list-fake-hover-background:               var(--dim-dark);
  --layout__playlist-list-item-drag-over-background:           var(--dim-dark);
  --layout__playlist-list-item-drag-over-border:               var(--dim-bright);
  --layout__playlist-list-item-editing-odd-background:         var(--dim-dark);
  --layout__playlist-list-item-editing-even-background:        var(--dim-dark);
  --layout__playlist-list-item-editing-content-background:     var(--dim-dark);
  --layout__playlist-list-item-editing-description-background: var(--primary);
  /* Game Image Split */
  --layout__game-image-split-hover-color:    #575757;
  --layout__game-image-split-disabled-color: #141414;
  /* Home Page */
  --layout__home-page-box-border:     var(--outline);
  --layout__home-page-box-background: var(--secondary);
  /* Credits */
  --layout__credits-tooltip-border:           var(--outline);
  --layout__credits-tooltip-background:       var(--back-primary);
  --layout__credits-tooltip-roles-background: var(--back-primary);
  /* Log Page */
  --layout__log-page-bar-background: var(--tertiary);
  /* Curate Page */
  --layout__curate-entry-collision-color: #efef98;
  /* Developer Page */
  --layout__developer-page-log-background: var(--back-primary);
  --layout__developer-page-log-border:     var(--outline);
  /* Simple Button */
  --layout__simple-button-background: var(--dim-bright);
  --layout__simple-button-border:     var(--outline);
  /* Header Menu Item */
  --layout__header-menu-item-hover-background: var(--dim-bright);
  --layout__header-menu-item-hover-border:     var(--outline);
  /* Misc */
  --layout__title-bar-cross-color:                 #eb4b4b;
  --layout__no-theme-suggestion-color:             var(--layout__secondary-text-color);
  --layout__icon-button-hover-fill:                var(--dim); /* Color of "icon buttons" while the cursor is hovering over them. */
  --layout__toggle-sidebar-fill:                   var(--dim-bright);
}

.icon__use--badge {
  fill: gold;
}
.icon__use--play-circle {
  fill: lime;
}
.icon__use--video {
  fill: blue;
}
.icon__use--wrench {
  fill: gray;
}
.icon__use--info {
  fill: #00eeee;
}
.icon__use--heart {
  fill: red;
}
.icon__use--tag {
  fill: tan;
}
.icon__use--code {
  fill: black;
}

.browse-right-sidebar__title-row__buttons
.icon__use--pencil {
  fill: #00ee00;
}
.browse-right-sidebar__title-row__buttons
.icon__use--trash {
  fill: #ee0000;
}
.browse-right-sidebar__title-row__buttons
.icon__use--check {
  fill: #00ee00;
}
.browse-right-sidebar__title-row__buttons
.icon__use--x {
  fill: #ee0000;
}
.browse-right-sidebar__title-row__buttons
.icon__use--circle-x {
  fill: #ee0000;
}

.icon__use--pencil {
  fill: #00ee00;
}
.icon__use--trash {
  fill: #ee0000;
}
.icon__use--check {
  fill: #00ee00;
}
.icon__use--x {
  fill: #ee0000;
}
.icon__use--circle-x {
  fill: #ee0000;
}

:link {
  color: #0077dd;
}
a:hover {
  color: #4cacff;
}
a:active {
  color: #a7f0ff;
}

.header__menu :link {
  color: var(--acc);
}
.header__menu__item__link {
  font-size: 14px;
  padding: 0px 5px;
}
.header {
  padding: 0px 5px;
}

.title-bar {
  color: var(--acc-inverted);
  background-color: #4c4a48;
  margin: 0px;
  padding: 0px;
  height: 30px;
}
.title-bar__title,
.title-bar__button-bar {
  top: 0px;
}
.title-bar__inner {
  height: 100%;
}
.title-bar__title {
  padding: 5px;
}

.title-bar__button-bar__min {
  background-image: url('images/min.png');
  width: 47px;
  height: 30px;
}
.title-bar__button-bar__max {
  background-image: url('images/max.png');
  width: 47px;
  height: 30px;
}
.title-bar__button-bar__cross {
  background-image: url('images/cross.png');
  width: 47px;
  height: 30px;
}

.home-page__box,
.curate-page__floating-box,
.curate-box,
.developer-page__log {
  box-shadow: 0px 2px 4px 0px #09090a;
  border-radius: 4px;
  border: none;
}
.home-page__box__head {
  border-bottom-color: var(--layout__tertiary-background);
}
.header__menu__item__link:active {
  background-color: var(--layout__primary-background);
}

.simple-button {
  height: 20px;
  font-size: 14px;
  box-shadow: 0px 1px 0px 0px #09090a;
  border-radius: 4px;
}
.simple-button:active {
  background-color: var(--layout__primary-background);
  box-shadow: 0px -2px 0px -2px #09090a;
  transform: translate(0px, 1px);
}
.ReactVirtualized__Grid__innerScrollContainer {
  margin: 0px auto;
}

.footer__wrap {
  padding-left: 2px;
}
.fp-logo {
  box-shadow: 0px -2px 0px -2px #09090a;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}