@import "variables";

@import "material-design-lite/material-design-lite";

// Core CSS
@import "ui/utilities";
@import "ui/scaffolding";
@import "ui/grid";
@import "ui/type";
@import "ui/buttons";
@import "ui/tables-responsive";
@import "ui/forms";
@import "ui/form-input";

// Components
@import "ui/boxes";
@import "ui/breadcrumbs";
@import "ui/call-to-actions";
@import "ui/callout";
@import "ui/cards";
@import "ui/feature-callout";
@import "ui/hover";
@import "ui/icon-boxes";
@import "ui/md-preloader";
@import "ui/md-cards";
@import "ui/md-tables";
@import "ui/image-size";
// @import "ui/pricing-tables";
@import "ui/ribbons";
@import "ui/sash";
// @import "ui/testimonials";
@import "ui/timeline";

$color-black: "0,0,0";
$select-background-color: transparent;
$select-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
$select-font-size: 16px;
$select-color: unquote("rgba(#{$color-black}, 0.5)") !default;
$select-padding: 4px;

select.mdl {
  font-family: inherit;
  background-color: transparent;
  width: 100%;
  padding: $select-padding 0;
  font-size: $select-font-size;
  color: $select-color;
  border: none;
  border-bottom: 1px solid $select-border-color;
}

/* Remove focus */
select.mdl:focus {
  outline: none
}

/* Hide label */
.mdl-selectfield label {display: none;}
/* Use custom arrow */
.mdl-selectfield select {appearance: none}
.mdl-selectfield {
  font-family: 'Roboto','Helvetica','Arial',sans-serif;
  position: relative;
  &:after {
    position: absolute;
    top: 0.75em;
    right: 0.5em;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .25em solid transparent;
    border-right: .25em solid transparent;
    border-top: .375em solid $select-border-color;
    pointer-events: none;
  }
}