// 
// @description : 
// @author      : Adarsh Pastakia
// @copyright   : 2016
// @license     : MIT
body,
html {
  height          : 100%;
  width           : 100%;
  padding         : 0;
  margin          : 0;
  line-height     : 1.25;
  overflow        : hidden;
  cursor          : default;
  @include user-select(none);

  color           : $base-text;
  background-color: $base-bg;

  font            : {
    family: $base-font-family;
    size  : $base-font-size;
  }

  .ui-selectable {
    cursor: text;
    @include user-select(text);
  }
}

*,
*:after,
*:before {
  @include box-sizing(border-box);
  @include selection($primary, contrast-color($primary));
  @include input-placeholder {
    color: rgba($input-placeholder,.5);
  }
}

input::-ms-clear,
select::-ms-clear,
textarea::-ms-clear {
  display: none;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  background-color: transparent !important;
}

a {
  text-decoration: none;
}

img {
  border: none;
}

a,
button {
  cursor : pointer;
  outline: none;
  color  : inherit;
}

textarea {
  resize: vertical;
}

input,
textarea {
  outline: none !important;
}

caption,
td,
th {
  text-align: start;
}

.ui-link {
  color: $link-text;

  &.ui-disabled {
    color     : $base-text !important;
    box-shadow: none !important;
  }

  &:focus,
  &:hover {
    color: $link-hover-text;
    @include box-shadow(0 1px 0 0 $link-hover-text);
  }

  &:active {
    color: $link-active-text;
  }
}

fieldset {
  border       : 1px solid $base-border-color;
  border-radius: $base-border-radius;
  margin       : .5em;
}

hr {
  background: none;
  border    : {
    top   : 1px solid $divider-shadow;
    bottom: 1px solid $divider-hilight;
  }
  @include transform(scaleY(.5));
}

table.ui-table {
  td,
  th {
    padding: .25em .5em;
  }

  thead td,
  thead th {
    font-weight     : 600;
    background-color: #f0f0f0;
    border-bottom   : 1px solid #e5e5e5;
  }

  tr:nth-of-type(even) td {
    background-color: #fafafa;
  }
}

.ui-scroll {
  @include scroll();
}

.ui-hidden {
  display: none;
}

.ui-block {
  display: block;
}

.ui-inline-block {
  display: inline-block;
}

.ui-inline {
  display: inline;
}

.ui-hide {
  visibility: hidden;
}

.ui-disabled {
  pointer-events: none;
}

.ui-shadow {
  box-shadow: 0 0 3px 0 $base-shadow;
}

.ui-icon {
  background-position: left center;
  background-repeat  : no-repeat;
  background-size    : 1em 1em;
  display            : inline-block;
  width              : 1em;
  height             : 1em;
}

// Padding
.ui-pad-all {
  padding: .25em .5em;
}

.ui-pad-h {
  padding: 0 .5em;
}

.ui-pad-v {
  padding: .25em 0;
}

.ui-pad-t {
  padding-top: .25em;
}

.ui-pad-b {
  padding-bottom: .25em;
}

.ui-pad-s {
  @include padding(start, .5em);
}

.ui-pad-e {
  @include padding(end, .5em);
}

// Margin
.ui-margin-all {
  margin: .25em .5em;
}

.ui-margin-h {
  margin: 0 .5em;
}

.ui-margin-v {
  margin: .25em 0;
}

.ui-margin-t {
  margin-top: .25em;
}

.ui-margin-b {
  margin-bottom: .25em;
}

.ui-margin-s {
  @include margin(start, .5em);
}

.ui-margin-e {
  @include margin(end, .5em);
}

// BORDERS
.ui-no-border {
  border: none !important;
}

.ui-border-all {
  border: 1px solid $base-border-color;
}

.ui-border-h {
  border: {
    width: 1px 0;
    color: $base-border-color;
    style: solid;
  }
}

.ui-border-v {
  border: {
    width: 0 1px;
    color: $base-border-color;
    style: solid;
  }
}

.ui-border-t {
  border-top: 1px solid $base-border-color;
}

.ui-border-b {
  border-bottom: 1px solid $base-border-color;
}

.ui-border-s {
  @include border(start, 1px solid $base-border-color);
}

.ui-border-e {
  @include border(end, 1px solid $base-border-color);
}

// Colors
.ui-badge {
  color        : $white;
  border-radius: 2rem;
  padding      : .2rem;
  min-width    : 1.5rem;
  font-size    : .65rem;
  line-height  : .65rem;
  text-align   : center;
  z-index      : 1;
  @include position(absolute, -.5em -.5em auto auto);
}

.ui-bg-dark {
  background-color: $dark;
  color           : $white;
}

.ui-bg-light {
  background-color: $light;
  color           : $black;
}

.ui-bg-primary {
  background-color: lighten($primary,5%);
  color           : $primary-text;
}

.ui-bg-secondary {
  background-color: lighten($secondary,5%);
  color           : $secondary-text;
}

.ui-bg-info {
  background-color: lighten($info,5%);
  color           : $info-text;
}

.ui-bg-danger {
  background-color: lighten($danger,5%);
  color           : $danger-text;
}

.ui-bg-success {
  background-color: lighten($success,5%);
  color           : $success-text;
}

.ui-bg-warning {
  background-color: lighten($warning,5%);
  color           : $warning-text;
}

.rtl,
[dir="rtl"] {
  .ui-badge {
    left : -.5em;
    right: auto;
  }
}