/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/


//overwrite _variables colors
$stable:                          #f48700 !default;
$positive:                        #2196f3 !default;
$calm:                            #03a9f4 !default;
$balanced:                        #4caf50 !default;
$energized:                       #ffeb3b !default;
$assertive:                       #f44336 !default;
$royal:                           #3f51b5 !default;
$dark:                            #37474f !default;

$font-color: #111;


// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "./lib/ionic/fonts" !default;

// Include all of Ionic
@import "./lib/ionic/scss/ionic";
@import "./recipe/list";
@import "./recipe/detail-edit/edit-recipe";
@import "./recipe/detail-readonly/view-recipe";

.center {
	text-align: center;
}

.bold {
	font-weight: 400 !important;
}

/* form styles */
.list .item.item-input.item-input-group input {
	padding-right: 5px !important;
}

.input-addon {
	padding-right: 15px;
}

/* hide number spinner because it's just ugly */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* shared classes */
.clickable {
	cursor: pointer;
}

/* spacing classes */
.space-40 {
	height: 40px;
}

.input-align-right {
	text-align: right;
}

// standardize heights
 .item-select {
	height: 47px;
}

// add hover over recipe
.item-content:hover {
	background-color: #dddddd;
}

.bar-stable .button-clear {
	color: white;
}

.bar .back-button .back-text {
	display: none;
}

.bar-stable .button-icon {
	color: white;
}

.bar-stable .button-icon:hover {
	color: darken(white, 5%);
}

.bar.bar-stable {
    border-color: #b2b2b2;
    background-color: $stable;
}

.bar.bar-stable .title {
    color: white;
}

.bar .title {
    font-size: 25px;
    font-weight: 600;
}

.bar-stable .button.button-clear {
    color: white;
}

.fixed-bottom {
	position: fixed;
	bottom: 0;
	margin: 0 !important;
}

.item-input.form-error {
	border-bottom: 3px solid $assertive;
	padding-bottom: 3px;
	color: $assertive;
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	  color: lighten($assertive, 15%);
	}
	::-moz-placeholder { /* Firefox 19+ */
	  color: lighten($assertive, 15%);
	}
	:-ms-input-placeholder { /* IE 10+ */
	  color: lighten($assertive, 15%);
	}
	:-moz-placeholder { /* Firefox 18- */
	  color: lighten($assertive, 15%);
	}
}