/**
 * Copyright 2022 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.
 */

@import url('//fonts.googleapis.com/css?family=Google+Sans:400,500,600');

// Include CSS from the nouislider library, which doesn't seem to get included
// automatically.
@import url(../node_modules/nouislider/dist/nouislider.css);

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/theming';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import '~@angular/cdk/overlay-prebuilt.css';

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$documentation-app-primary: mat-palette($mat-pink, 800, 600, 900);
$documentation-app-accent: mat-palette($mat-purple, A200, A100, A400);

// The warn palette is optional (defaults to red).
$documentation-app-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$documentation-app-theme: mat-light-theme(
  $documentation-app-primary,
  $documentation-app-accent,
  $documentation-app-warn
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($documentation-app-theme);

* {
  font-family: 'Google Sans', Arial, sans-serif;
}

// Override typography for all Angular Material.
@include angular-material-typography(
  mat-typography-config($font-family: '"Google Sans", Arial, sans-serif')
);

// Sets a global font-weight for common text elements. We are not overly
// general here (not using a * like above), because in that case this global
// selector would override local CSS that sets material buttons to a heavier
// font weight, which we still want to allow.
div,
h1,
h2,
h3,
p {
  font-weight: 400;
}

body {
  height: 100vh;
  margin: 0px;
}

/**
 * All styling below is to override material styling that cannot be done from
 * the component-level CSS because of injected html templated.
 */

/*
 * Prevents the comment card text content from growing larger than the card,
 * which causes layout weirdness.
 */
.mat-list-base
  .comment-card
  .mat-list-option.list-item-container
  .mat-list-item-content-reverse
  .mat-list-text {
  align-self: flex-start;
}

.action-warning-dialog-container,
.api-error-dialog-container {
  .mat-dialog-container {
    border-radius: 20px;
    padding-left: 32px;
    padding-right: 26px;
    padding-top: 28px;
  }
}

/** Prevents padding on exit dialog component. */
.exit-dialog-container .mat-dialog-container {
  background: none;
  box-shadow: none;
  padding: 0px;
}

.loading-dialog-container .mat-dialog-container {
  border-radius: 8px;
}

.clear-report-dialog-container .mat-dialog-container {
  border-radius: 20px;
  width: 633px;
}

/** Formats the checkbox to be on the top of the card.*/
.comment-card .mat-list-option.list-item-container .mat-pseudo-checkbox {
  align-self: flex-start;
}

app-help-center
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start {
  border-radius: 30px 0 0 30px;
  min-width: 40px;
}

app-help-center .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: #ffffff;
  border-radius: 30px;
}

app-help-center .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 30px 30px 0;
}

app-help-center .mat-form-field-flex {
  align-items: center;
}

app-help-center .mat-form-field-appearance-outline .mat-form-field-infix {
  padding-top: 0.5em;
}

app-help-center .mat-form-field-appearance-outline .mat-form-field-prefix,
app-help-center .mat-form-field-appearance-outline .mat-form-field-suffix {
  top: 0.1em;
}

app-help-center .mat-expansion-panel-header,
app-help-center .mat-expansion-panel-body {
  padding-left: 32px;
  padding-right: 32px;
}

app-filter-dropdown
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start,
app-search-box
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start {
  border-radius: 20px 0 0 20px;
  min-width: 40px;
}

app-filter-dropdown
  .mat-form-field-appearance-outline
  .mat-form-field-outline-end,
app-search-box .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 20px 20px 0;
}

app-filter-dropdown .mat-form-field,
app-search-box .mat-form-field {
  min-height: 4em;
}

app-filter-dropdown .mat-form-field-appearance-outline .mat-form-field-outline,
app-search-box .mat-form-field-appearance-outline .mat-form-field-outline {
  bottom: 0.4em;
  top: 1em;
}

app-filter-dropdown
  .filter-active.mat-form-field-appearance-outline
  .mat-form-field-outline {
  background-color: rgba(209, 179, 195, 0.2);
  border-radius: 20px;
}

app-filter-dropdown
  .mat-form-field-appearance-outline
  .mat-select-arrow-wrapper {
  transform: none;
}

app-filter-dropdown .mat-select-trigger {
  padding-left: 8px;
}

app-filter-dropdown .mat-option .mat-icon {
  // Overrides mat-icon default of 16px.
  margin-right: 0px;
}

.mat-primary
  .mat-option.mat-selected:not(.mat-option-disabled).black-on-select {
  color: black;
}

app-report-pdf {
  font-family: 'Roboto', sans-serif;
}

app-report-pdf * {
  font-family: inherit;
}

.chip-option .mat-option-text {
  padding-left: 8px;
}

.custom-option-multi-select {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.custom-option-multi-select .mat-option-text {
  padding-left: 0px;
}

.custom-option-multi-select .mat-option-text mat-icon {
  font-size: 20px;
  height: 20px;
  margin-right: 8px;
  width: 20px;
}

.custom-option-multi-select .mat-pseudo-checkbox {
  display: none;
}

app-search-box .mat-chip-list-wrapper .mat-standard-chip {
  margin-bottom: 1px;
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 1px;
}

app-search-box .mat-form-field-appearance-outline .mat-form-field-flex {
  align-items: center;
}

.filters-container .mat-form-field-infix {
  // This is set to an odd value initially, and with our CSS modifications we
  // need to adjust it so that things are vertically centered.
  border-top: 0.65em solid transparent;
}

app-create-report
  .options-dropdown
  .mat-form-field-appearance-legacy
  .mat-form-field-underline {
  display: none;
}

h2 {
  font-size: 24px;
}

button {
  &.action-button,
  &.action-button-stroked {
    border-radius: 18px;
    text-transform: capitalize;
  }

  &.action-button {
    background-color: #b23c66;
    color: #ffffff;
  }

  &.action-button-stroked {
    background-color: transparent;
    border: 1px solid #a54167;
    color: #a54167;
  }
}

app-review-report .additional-notes textarea.mat-input-element {
  height: 235px;
}

app-review-report .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: #fff;
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.54);
}

app-create-report mat-paginator .mat-paginator-range-label {
  margin: 0;
}

app-create-report .loading mat-paginator .mat-paginator-range-label {
  visibility: hidden;
}

/** Custom styles for the nouifilter library. */
app-toxicity-range-filter .noUi-connects {
  background: linear-gradient(
    to right,
    #34a85340 0%,
    #fbbc0440 50%,
    #e9423540 100%
  );
}

// DOM element connecting the lower and upper handles on the slider.
app-toxicity-range-filter .noUi-connect {
  background: linear-gradient(to right, #4d9966 0%, #9da1a3 50%, #e37400 100%);
  clip-path: inset(0% calc(100% - var(--max-score)) 0% var(--min-score));
  // This is kind of a hack to override the default behavior, which uses a
  // transform. We use a clip-path instead to preserve the linearity of the
  // gradient from the background.
  transform: none !important;
}

app-toxicity-range-filter .noUi-horizontal .noUi-handle {
  border-radius: 10px;
  height: 20px;
  top: -8px;
  width: 20px;
}

app-toxicity-range-filter .noUi-handle:before,
.noUi-handle:after {
  display: none;
}

app-toxicity-range-selector-dialog .mat-form-field-infix,
app-toxicity-range-selector-dialog .mat-form-field-suffix {
  font-weight: 500;
}

app-welcome-page .mat-expansion-panel-content {
  font-size: 18px;
}

// Tooltip styling. Since the tooltip is an overlay and not part of the
// component, the CSS needs to go in a top-level file.
.toxicity-tooltip,
.unscored-tooltip,
.actions-tooltip {
  background-color: #b23c66;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  padding: 16px !important; // !important required to override default padding
}

// Class is set on the overlay.
.onboarding-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.onboarding-view-settings {
  height: 202px;
}

.onboarding-filters {
  height: 190px;
}

.onboarding-pagination {
  height: 165px;
}

.onboarding-recommended-reports {
  height: 193px;
}

.onboarding-comment-card {
  height: 165px;
}

.onboarding-review-report {
  height: 188px;
}

.exit-dialog,
.onboarding-recommended-reports,
.onboarding-view-settings,
.onboarding-filters,
.onboarding-pagination,
.onboarding-comment-card,
.onboarding-review-report {
  background: #b23c66;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
  width: 376px;

  .message {
    padding-left: 22px;
    padding-right: 24px;
  }

  button {
    background-color: #ffffff;
    border-radius: 18px;
    height: 36px;
    margin-left: 22px;
    margin-top: 8px;
    text-transform: uppercase;
    width: 110px;
  }

  h1 {
    font-size: 24px;
    line-height: 28px;
    padding-left: 22px;
    padding-right: 24px;
    margin-bottom: 8px;
    margin-top: 18px;
  }
}

// Mixin for common mat-slide-toggle styles that apply to both toggled and
// untoggled states.
@mixin max-slide-toggle-theme($color, $left-offset) {
  .mat-slide-toggle-bar {
    background-color: transparent;
    border: 1px solid $color;
  }
  .mat-slide-toggle-thumb-container {
    // Shifts the thumb so the toggle bar border is not visible underneath.
    left: $left-offset;
  }
  .mat-slide-toggle-thumb {
    background-color: $color;
  }
}

.mat-slide-toggle {
  @include max-slide-toggle-theme(#606266, -1px);
}

.mat-slide-toggle.mat-checked {
  @include max-slide-toggle-theme(#a54167, 1px);

  // Adds a checkmark to the toggle thumb.
  .mat-slide-toggle-thumb::after {
    background: url('assets/checkmark.svg') no-repeat 0 0;
    content: ' ';
    height: 18px;
    width: 18px;
    position: absolute;
    left: 1px;
    top: 1px;
  }
}

.dropdown-backdrop {
  background-color: transparent;
}

// Visible to screenreader only.
// See https://css-tricks.com/inclusively-hidden/
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
