// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";

// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: multi;


@import "ionic.globals";

// Color palette
$black:           #3a3a3a; // Headings, standard text.
$gray-darker:     #626262; // Text (emphasis-detail), placeholder, background.
$gray-dark:       #9e9e9e; // Borders (never text).
$gray:            #dddddd;
$gray-light:      #e9e9e9; // Background.
$gray-lighter:    #f5f5f5;
$white:           #ffffff; // Background, reversed text.

$blue:            #0064d2; // Link, background.
$turquoise:       #007982; // Accent.
$green:           #5e8100; // Accent.
$red:             #cb3d4d;
$orange:          #f98012; // Accent (never text).
$yellow:          #fbad1a; // Accent (never text).
$core-color:      $orange;

// Branded apps customization
// --------------------------------------------------
@import "bmma";


$blue-light:      mix($blue, white, 20%) !default; // Background.
$blue-dark:       darken($blue, 10%) !default;

$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
$turquoise-dark:  darken($turquoise, 10%) !default;

$green-light:     mix($green, white, 20%) !default;
$green-dark:      darken($green, 10%) !default;

$red-light:       mix($red, white, 20%) !default;
$red-dark:        darken($red, 10%) !default;

$orange-light:    lighten($orange, 10%) !default;

$yellow-light:    mix($yellow, white, 20%) !default;
$yellow-dark:     mix($yellow, black, 40%) !default;

$core-color-light:    lighten($core-color, 10%) !default;
$core-color-dark:     darken($core-color, 10%) !default;

$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/

$toolbar-background: $core-color !default;
$content-padding: 10px;

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary:    $core-color,
  secondary:  $turquoise,
  danger:     $red,
  light:      $gray-lighter,
  gray:       $gray-dark,
  dark:       $black,
  warning:    $yellow,
  success:    $green,
  info:       $blue,
  inverted: (
    base: $white,
    contrast: $core-color
  )
);

$text-color:                 $black !default;
$link-color:                 $blue !default;
$background-color:           $gray-light !default;
$subdued-text-color:         $gray-darker !default;

$core-warning-color: colors($colors, warning) !default; // yellow.
$core-success-color: colors($colors, success) !default; // green.
$core-info-color: colors($colors, info) !default; // / blue.
$core-error-color: colors($colors, alert) !default; // Red.

$list-background-color:      $white !default;

$tabs-background:            $gray-darker !default;
$tabs-border-color:          #b2b2b2 !default;
$tabs-tab-color-active:      $core-color !default;
$tabs-tab-color-inactive:    $white !default;
$ion-tabs-badge-color:       $tabs-tab-color-active !default;

$text-input-highlight-color-valid: $green !default;
$text-input-highlight-color-invalid: $red !default;

$button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) ;

$refresher-icon-color: $core-color !default;

$core-online-color: #5cb85c;

$core-select-placeholder-color: $core-color !default;
$item-avatar-size: 54px !default;
$input-select-opacity: .5 !default;
$note-color: $gray-dark !default;
$popover-width: 280px !default;
$item-divider-background: $gray-lighter !default;
$item-divider-color: $black !default;

$core-star-color: $core-color !default;

// Moodle Mobile variables
// --------------------------------------------------

// Init screen.
$core-color-init-screen:          #ffffff !default;
$core-color-init-screen-alt:      #ffffff !default;
$core-init-screen-spinner-color:  $core-color !default;
$core-init-screen-logo-width:     60% !default;
$core-init-screen-logo-max-width: 300px !default;

$core-fixed-url:                  false !default;

$core-loading-spinner-color: $core-color !default;
$core-spinner-color: $core-color !default;
$core-button-outline-background-color: $white !default;

// Login.
$core-login-page-background-color: radial-gradient(white, $gray-light) !default;
$core-login-box-background-color: $white !default;
$core-login-box-background-border: $gray !default;
$core-login-box-text-color: $text-color !default;
$core-login-button-outline: false !default;
$core-login-loading-color: false !default;
$core-login-item-inner-background-color: $white !default;
$core-login-item-background-color: $white !default;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$text-input-ios-show-focus-highlight: false;
$item-ios-avatar-size: $item-avatar-size;
$loading-ios-spinner-color: $core-loading-spinner-color;
$spinner-ios-ios-color: $core-spinner-color;
$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
$button-ios-outline-background-color: $core-button-outline-background-color;
$toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
$checkbox-ios-icon-border-radius: 0px !default;
$select-ios-placeholder-color: $core-select-placeholder-color;
$radio-ios-disabled-opacity: $input-select-opacity !default;
$checkbox-ios-disabled-opacity: $input-select-opacity !default;
$toggle-ios-disabled-opacity: $input-select-opacity !default;
$note-ios-color: $note-color;
$popover-ios-width: $popover-width;
$item-ios-divider-background: $item-divider-background;
$item-ios-divider-color: $item-divider-color;

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$text-input-md-show-focus-highlight: true;
$item-md-detail-push-show: true;
$item-md-avatar-size: $item-avatar-size;
$loading-md-spinner-color: $core-loading-spinner-color;
$spinner-md-crescent-color: $core-spinner-color;
$tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
$button-md-outline-background-color: $core-button-outline-background-color;
$font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
$select-md-placeholder-color: $core-select-placeholder-color;
$label-md-text-color: $text-color !default;
$radio-md-disabled-opacity: $input-select-opacity !default;
$checkbox-md-disabled-opacity: $input-select-opacity !default;
$toggle-md-disabled-opacity: $input-select-opacity !default;
$note-md-color: $note-color;
$popover-md-width: $popover-width;
$action-sheet-md-title-color: $core-color;
$item-md-divider-background: $item-divider-background;
$item-md-divider-color: $item-divider-color;

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

$text-input-wp-show-focus-highlight: true;
$item-wp-detail-push-show: true;
$item-wp-avatar-size: $item-avatar-size;
$loading-wp-spinner-color: $core-loading-spinner-color;
$spinner-wp-circles-color: $core-spinner-color;
$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
$button-wp-outline-background-color: $core-button-outline-background-color;
$select-wp-placeholder-color: $core-select-placeholder-color;
$label-wp-text-color: $text-color !default;
$radio-wp-disabled-opacity: $input-select-opacity !default;
$checkbox-wp-disabled-opacity: $input-select-opacity !default;
$toggle-wp-disabled-opacity: $input-select-opacity !default;
$note-wp-color: $note-color;
$popover-wp-width: $popover-width;
$item-wp-divider-background: $item-divider-background;
$item-wp-divider-color: $item-divider-color;

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";


// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/

@import "ionic.ionicons";


// Fonts
// --------------------------------------------------

@import "./fonts";

// Moodle Mobile variables
// --------------------------------------------------

// Small avatar ideal for icons.
$item-media-width: 32px !default;
$item-media-height: 32px !default;

$core-top-tabs-background: $white !default;
$core-top-tabs-color: $gray-dark !default;
$core-top-tabs-border: $gray !default;
$core-top-tabs-color-active: $core-color !default;
$core-top-tabs-border-active: $core-top-tabs-color-active !default;

$core-splitview-selected: $core-color-light !default;
$core-progressbar-color: $core-color-light !default;

$core-user-profile-communication-icons-color: $core-color !default;

$core-rte-min-height: 80px;

$core-toolbar-button-image-width: 32px;

$core-text-hightlight-background-color: lighten($blue, 40%) !default;

// Timer variables.
$core-timer-warn-color:     $red !default;
$core-timer-iterations:     15 !default;

// Question variables.
$core-question-correct-color:         $green-dark !default;
$core-question-correct-color-bg:      $green-light !default;
$core-question-incorrect-color:       $red !default;
$core-question-incorrect-color-bg:    $red-light !default;
$core-question-feedback-color:        $yellow-dark !default;
$core-question-feedback-color-bg:     $yellow-light !default;
$core-question-warning-color:         $red !default;
$core-question-saved-color-bg:        $gray-light !default;

$core-question-state-correct-color:   $green-light !default;
$core-question-state-partial-color:   $yellow-light !default;
$core-question-state-partial-text:    $yellow !default;
$core-question-state-incorrect-color: $red-light !default;

$core-dd-question-selected-shadow: 2px 2px 4px $gray-dark !default;
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;

// Mixins
// -------------------------
@mixin core-transition($where: all, $time: 500ms) {
    -webkit-transition: $where $time ease-in-out;
    -moz-transition: $where $time ease-in-out;
    -ms-transition: $where $time ease-in-out;
    -o-transition: $where $time ease-in-out;
    transition: $where $time ease-in-out;
}

@mixin push-arrow-color($color) {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important;
}

@mixin border-start($px, $type, $color) {
  @include ltr() {
      border-left: $px $type $color;
  }

  @include rtl() {
      border-right: $px $type $color;
  }
}


@mixin border-end($px, $type, $color) {
  @include ltr() {
      border-right: $px $type $color;
  }

  @include rtl() {
      border-left: $px $type $color;
  }
}

@mixin safe-area-border-start($px, $type, $color) {
  $safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
  $safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});

  @include border-start($px, $type, $color);
  @media screen and (orientation: landscape) {
    @include border-start($safe-area-position, $type, $color);
    @include border-start($safe-area-position-env, $type, $color);
  }
}


@mixin safe-area-border-end($px, $type, $color) {
  $safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
  $safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});

  @include border-end($px, $type, $color);
  @media screen and (orientation: landscape) {
    @include border-end($safe-area-position, $type, $color);
    @include border-end($safe-area-position-env, $type, $color);
  }
}

@mixin safe-area-padding-start($start, $end) {
  $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
  $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});

  @include padding-horizontal($start, $end);

  @media screen and (orientation: landscape) {
    @include padding-horizontal($safe-area-start, $end);
    @include padding-horizontal($safe-area-start-env, $end);
  }
}

@mixin safe-area-padding-end($start, $end) {
  $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
  $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});

  @include padding-horizontal($start, $end);

  @media screen and (orientation: landscape) {
    @include padding-horizontal($start, $safe-area-end);
    @include padding-horizontal($start, $safe-area-end-env);
  }
}

@mixin horizontal_scroll_item($width, $min-width, $max-width) {
    flex: 0 0 $width;
    min-width: $min-width;
    max-width: $max-width;
    align-self: stretch;
    display: block;

    &.card-md, .card-md {
      height: calc(100% - #{($card-md-margin-bottom + $card-md-margin-top)});
      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
    }
    &.card-ios, .card-ios {
      height: calc(100% - #{($card-ios-margin-bottom + $card-ios-margin-top)});
      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
    }
    &.card-wp, .card-wp {
      height: calc(100% - #{($card-wp-margin-bottom + $card-wp-margin-top)});
      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
    }
    &.card-md {
      margin-top: $card-md-margin-top;
      margin-bottom: $card-md-margin-bottom;
    }
    &.card-ios {
      margin-top: $card-ios-margin-top;
      margin-bottom: $card-ios-margin-bottom;
    }
    &.card-wp {
      margin-top: $card-wp-margin-top;
      margin-bottom: $card-wp-margin-bottom;
    }

    &.card, .card {
      @media (max-width: 360px) {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(100% - 12px);
      }
    }

    [text-wrap] .label {
        h2, p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

@mixin core-headings() {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.8rem;
  }
  h3 {
    font-size: 2.6rem;
  }
  h4 {
    font-size: 2.2rem;
  }
  h5 {
    font-size: 1.8rem;
  }
  h6 {
    font-size: 1.4rem;
  }
}

@mixin core-as-items() {
  .item-md.item-block > .item-inner {
    border-bottom: 1px solid $list-md-border-color;
  }

  .item-ios.item-block > .item-inner {
    border-bottom: $hairlines-width solid $list-ios-border-color;
  }

  .item-wp.item-block > .item-inner {
    border-bottom: 1px solid $list-wp-border-color;
  }

  &:last-child .item > .item-inner {
    border-bottom: 0;
  }
}

@mixin core-items() {
  &.item-md.item-block > .item-inner {
    border-bottom: 1px solid $list-md-border-color;
  }

  &.item-ios.item-block > .item-inner {
    border-bottom: $hairlines-width solid $list-ios-border-color;
  }

  &.item-wp.item-block > .item-inner {
    border-bottom: 1px solid $list-wp-border-color;
  }

  &:last-child > .item-inner {
    border-bottom: 0;
  }
}

@mixin core-selected-item($selected-color) {
  @include border-start(5px, solid, $selected-color);

  &.item-md {
      @include padding(null, null, null, $item-md-padding-start - 5px);
  }
  &.item-ios {
      @include padding(null, null, null, $item-ios-padding-start - 5px);
  }
  &.item-wp {
      @include padding(null, null, null, $item-wp-padding-start - 5px);
  }
}

// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";

// Format text styles.
@import "format-text";