// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.


// Grid
$mat-grid: 8px;
$mat-grid-type: 4px;

// Forces an element to take up the same space as its closest, positioned
// ancestor or, if none exists, the root element.
@mixin fit {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

// clearfix forces the containing element to contain and be the same height as
// the floated child elements.
@mixin clearfix() {
  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }
}

// DEPRECATED: use flex directly instead.
@mixin button-bar-layout() {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

// Styles text that is used as a floating label over a material component.
//
// DEPRECATED: use the caption typography mixin instead.
@mixin mat-input-header() {
  color: $mat-gray-600;
  // TODO(google): Migrate to extended mixin mat-font-caption
  font-size: $mat-font-size-caption;
  font-weight: $mat-font-weight-regular;
}

// DEPRECATED: use <material-button> instead.
@mixin clear-button() {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-family: inherit;
  position: relative;
}

// Note: this only supports square icons.
//
// WARINING: does not work in high contrast mode.
//
// DEPRECATED: use <material-icon> or <img> instead.
@mixin icon-background(
    $icon-url, $background-size: 6 * $mat-grid, $icon-size: 3 * $mat-grid) {

  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;

  background-image: inline-image($icon-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: $icon-size $icon-size;
  height: $background-size;
  padding: (($background-size - $icon-size) / 2);
  width: $background-size;
}

// DEPRECATED: use <material-button icon> instead.
@mixin icon-button(
    $icon-url, $button-size: 6 * $mat-grid, $icon-size: 3 * $mat-grid) {

  @include clear-button();
  font-size: 0;
  height: $button-size;
  outline: none;
  width: $button-size;

  // Icon is in after pseudo element to isolate opacity fiddling.
  &::after {
    @include icon-background($icon-url, $button-size, $icon-size);
    content: '';
    display: block;
    opacity: $mat-icon-opacity;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity $mat-transition-standard $mat-transition;
  }

  // Light theme - default
  &:focus::after,
  &:hover::after,
  &:active::after {
    opacity: $mat-icon-opacity-hover;
  }

  &:disabled::after {
    opacity: $mat-icon-opacity-disabled;
  }

  // Dark theme
  &.dark::after {
    opacity: $mat-icon-dark-opacity;
  }

  &.dark:focus::after,
  &.dark:hover::after,
  &.dark:active::after {
    opacity: $mat-icon-dark-opacity-hover;
    outline: none;
  }

  &.dark:disabled::after {
    opacity: $mat-icon-dark-opacity-disabled;
  }
}

// Similar to icon button, but to be used with a button containing an
// `<glyph>` element.
//
// DEPRECATED: use <material-button icon> instead.
@mixin glyph-button($button-size: 6 * $mat-grid, $circle: false) {

  @include clear-button();
  height: $button-size;
  opacity: $mat-icon-opacity;
  outline: none;
  padding: 0;
  transition: opacity $mat-transition-standard $mat-transition;
  width: $button-size;

  @if $circle {
    border-radius: $button-size / 2;
  }

  // Light theme - default
  &:focus,
  &:hover,
  &:active {
    opacity: $mat-icon-opacity-hover;
  }

  &:disabled {
    opacity: $mat-icon-opacity-disabled;
  }

  // Dark theme
  &.dark {
    opacity: $mat-icon-dark-opacity;
  }

  &.dark:focus,
  &.dark:hover,
  &.dark:active {
    opacity: $mat-icon-dark-opacity-hover;
    outline: none;
  }

  &.dark:disabled {
    opacity: $mat-icon-dark-opacity-disabled;
  }
}

// DEPRECATED
//
// The following mixins are all deprecated.
// The equivalent native CSS is available in all supported browsers.
//

// Duplicate property for fall back if `grab` is unavailable (IE)
@mixin cursor-grab() {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

@mixin cursor-grabbing() {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

@mixin box-sizing($type:border-box) {
  -moz-box-sizing: $type; // Firefox < 29
  box-sizing: $type;      // Chrome, IE 8+, Opera, Safari 5.1
}

