/*
 * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/* ----------------------------------------------------------------------------
 * Base appearance
 * ------------------------------------------------------------------------- */

/*
 * Device specific background hacks related to rubberband
 */
body {
  color: $black;

  /* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
  @supports (-webkit-appearance: none) {
    background: $primary;
  }

  /*
   * Don't tint menu bar on iOS
   */
  .ios & {
    background: $white;
  }
}

/*
 * Horizontal separators
 */
hr {
  border: 0;
  border-top: 1px solid $black-lightest;
}

/*
 * Toggle button
 */
.toggle-button {
  cursor: pointer;
  color: inherit;
}

/*
 * Backdrop
 */
.backdrop {
  background: $white;

  /* [tablet landscape+]: Introduce paper with shadow */
  @include break-from-device(tablet landscape) {
    background: darken($white, 5%);
  }
}

/*
 * Backdrop paper with shadow
 */
.backdrop-paper:after {
  background: $white;

  /* [tablet landscape+]: Add drop shadow */
  @include break-from-device(tablet landscape) {
    @include drop-shadow(1);
  }
}

/*
 * Overlay
 */
.overlay {
  background: $black-light;
  opacity: 0;

  /*
   * Expanded drawer
   */
  #toggle-drawer:checked ~ &,
  .toggle-drawer & {
    opacity: 1;
  }
}

/*
 * Application header
 */
.header {
  @include drop-shadow(1);

  background: $primary;
  color: $white;

  /*
   * Add status bar overlay for iOS web application
   */
  .ios.standalone &:before {
    background: $black-lightest;
  }
}

/*
 * Navigation path within header bar
 */
.bar .path {
  color: $white-light;
}

/*
 * Draw round area around icon on touch
 */
.button .icon {
  border-radius: 100%;
}

/*
 * Pushed/clicked icon
 */
.button .icon:active {
  background: $white-lightest;
}