@import 'huegasm-variables';

div.dimmerOn {
  color: $whitish !important;
  background: $blackish !important;
}

html.dimmerOn {
  color: white;
  background: $blackish;
}

body.dimmerOn {
  color: $whitish;
  background: $blackish;
  .md-track {
    background: $whitish;
  }
  .color {
    border: 1px solid white;
  }
  .playlist-item, .dropdown-menu, .add-new-music {
    color: $whitish;
    background-color: $dimmerOnButtonColor;
  }
  .dropdown-menu {
    a {
      color: $whitish;
      &:hover {
        background-color: darken($dimmerOnButtonColor, 10%) !important;
      }
    }
  }
  .playlist-item {
    &.active {
      background: darken($dimmerOnButtonColor, 15%) !important;
    }
    &:hover {
      background: darken($dimmerOnButtonColor, 10%);
    }
    .close {
      color: $whitish !important;
      &:hover {
        color: white !important;
      }
    }
  }
  svg {
    -webkit-filter: drop-shadow(0 0 5px #228DFF);
  }
  md-input-container {
    label {
      color: $whitish;
    }
    input {
      border-bottom-color: $whitish !important;
    }
    input {
      color: $whitish !important;
    }
  }
  .add-new-music:hover {
    background: darken($dimmerOnButtonColor, 5%);
  }
  .popover-content {
    color: black !important;
  }
  .md-bar {
    background-color: darken(white, 60%) !important;
  }
}

.power-settings-new.dimmerOn,
.brightness-4.dimmerOn,
.color-lens.dimmerOn,
.flare.dimmerOn,
.loop.dimmerOn,
.group.dimmerOn,
.settings.dimmerOn,
.mic.dimmerOn,
.check.dimmerOn,
.star.dimmerOn,
.library-music.dimmerOn {
  color: inherit !important;
  text-shadow: $glowingText;
  opacity: 0.9 !important;
}

#dimmer {
  display: inline-block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: url(/favicon-96x96.png) center center no-repeat;
  background-size: 40px 40px;
}