/*
 * Copyright 2018 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/theming';
@import "./popup-theme.scss";
@import url(//fonts.googleapis.com/css?family=Google+Sans:100,200,300,400,500,600);
@import url(//fonts.googleapis.com/css?family=Roboto:400,500);

/**
 * These need to be done in the global context because Angular makes component
 * specific CSS definitions scoped to only that component.
 *
 * TODO: Can these things be part of tune-app-theme?
 */
.mat-checkbox-frame {
  border-radius: 10px !important;
  // TODO: Get exact color for this.
  border-color: rgba(200, 200, 200, 0.7) !important;
  border-width: 1px !important;
}

.mat-checkbox-background {
  border-radius: 10px !important;
}

.app-navigation .mat-tab-label {
  background-color: #ffffff;
  opacity: 1;
  height: 56px;
}

.app-navigation .mat-tab-label mat-icon path {
  fill: var(--background-color);
}

.app-navigation.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus {
  // TODO: Figure out why rgba(0,0,0,0.04) doesn't work correctly here.
  background-color: #f5f5f5;
}

.app-navigation.mat-tab-group.mat-primary .mat-ink-bar {
  background-color: var(--background-color);
  opacity: 0.5;
}

.settings .mat-radio-label {
  width: 100%;
}

.settings .mat-radio-container {
  margin-left: auto;
}

.settings .mat-radio-outer-circle {
  border-color: rgba(255, 255, 255, 0.6);
}

.settings .mat-tab-label {
  color: #ffffff;
  text-transform: uppercase;
}

.settings .mat-tab-label-active {
  opacity: 1;
}

.settings .mat-tab-group.mat-primary .mat-ink-bar {
  background-color: #ffffff;
}

.settings .mat-tab-list {
  width: 300px;
}

tune-feedback-page .mat-form-field.mat-focused label {
  color: #ffffff;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-hint {
  color: rgba(255, 255, 255, 0.6);
  padding-top: 8px;
  font-size: 12px;
  line-height: 20px;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-form-field-infix {
  color: #ffffff;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 16px;
  line-height: 20px;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-form-field-underline {
  background-color: rgba(255, 255, 255, 0.6);
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline.mat-focused .mat-form-field-underline {
  background-color: #ffffff;
}

tune-feedback-page .mat-form-field.mat-focused .mat-form-field-underline .mat-form-field-ripple {
  background-color: rgba(255, 255, 255, 0);
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-form-field-label {
  color: rgba(255, 255, 255, 0.6);
  padding-left: 12px;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
  color: #ffffff;
  margin-left: 4px;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba(255, 255, 255, 0.6);
}

tune-feedback-page .mat-form-field.mat-focused.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: #ffffff;
}

tune-feedback-page .mat-form-field.mat-form-field-appearance-outline .mat-form-field-outline {
  color: rgba(255, 255, 255, 0.6);
}

tune-feedback-page .mat-form-field .mat-input-element {
  caret-color: #ffffff;
}

// TODO: get exact colors: https://github.com/Jigsaw-Code/tune/issues/134
.top-bar .enableSwitch.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: white;
  opacity: 1;
}

.top-bar .enableSwitch.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #f3e1ee;
  opacity: 1;
}

.top-bar .enableSwitch.mat-slide-toggle:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #bcbcbc;
}

.top-bar .enableSwitch.mat-slide-toggle:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #a8a8a8;
}

.top-bar .enableSwitch.mat-slide-toggle.mat-checked .mat-slide-toggle-ripple {
}

.top-bar .enableSwitch.mat-slide-toggle .mat-slide-toggle-ripple {
}

.top-bar .enableSwitch.mat-slide-toggle .mat-slide-toggle-ripple .mat-ripple-element {
  background-color: rgba(255, 255, 255, 0.12);
}


/* Toggle label */
.top-bar .mat-slide-toggle-content {
  opacity: 0.6;
  padding-right: 8px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: normal;
}


/**
 * There is a bug that makes the pagination controls appear when they shouldn't.
 * We use this hack to ignore them anyway.
 *
 * TODO: Look into this more and file a bug against Angular.
 */
.settings .mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
  display: none;
}

body tune-app-root .mat-checkbox-checkmark-path, html tune-app-root .mat-checkbox-checkmark-path {
  stroke: var(--background-color) !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #ffffff;
}

body, html {
  margin: 0;
  padding: 0;
  height: 600px;
  width: 340px;
  overflow: hidden;
  color: white;
  @include angular-material-theme($tune-app-theme);
}
