.with-relief {
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24);
}

.with-relief.topbar {
  box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.24);
}

.with-relief.bottombar {
  box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.24);
}

.with-relief.leftbar {
  box-shadow: 8px 0px 8px -4px rgba(0, 0, 0, 0.24);
}

.with-relief.rightbar {
  box-shadow: -8px 0px 8px -4px rgba(0, 0, 0, 0.24);
}

html, body {
  color: color(text);
  line-height: 1.5em;
}

small {
  font-size: 0.9em;
}

/* colors */
.filled, %filled {

  & {
    background-color: greys(white);
  }

  &.default {
    background-color: #f0f0f0; // TODO: $color-default
  }

  &.primary {
    background-color: color(primary);
    &, a {
      color: greys(white);
    }
  }

  &.primary2 {
    background-color: color(primary2);
    &, a {
      color: greys(white);
    }
  }

  &.success {
    background-color: color(success);
    &, a {
      color: greys(white);
    }
  }

  &.warning {
    background-color: color(warning);
    &, a {
      color: greys(white);
    }
  }

  &.danger {
    background-color: color(danger);
    &, a {
      color: greys(white);
    }
  }

  &.contrast {
    background-color: color(text);
    &, a {
      color: greys(white);
    }
  }

  &.volet2 {
    background-color: color(volet2);
  }

}

.round {
  border-radius: 50%;
}

.jumbotron, %jumbotron {
  @extend %padded;
  @extend %filled;
  border: 1px solid greys(10%);
}

.bordered, .bordered-r, .bordered-l, .bordered-t, .bordered-b {

  border-width: 1px;

  & {
    border-color: color(text);
  }

}

.bordered {
  border-style: solid;
}

.bordered-r {
  border-right-style: solid;
}
.bordered-l {
  border-left-style: solid;
}
.bordered-t {
  border-top-style: solid;
}
.bordered-b {
  border-bottom-style: solid;
}

.text-default {
  color: #eee; // TODO: $color-default
}

.text-primary {
  color: color(primary);
}

.text-primary2 {
  color: color(primary2);
}

.text-success {
  color: color(success);
}

.text-warning {
  color: color(warning);
}

.text-danger {
  color: color(danger);
}

.is-underlined {
  text-decoration: underline;
}

.title {
  color: color(titles);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;

  &.underlined {
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #404040;
  }
}

/* cursor */
.clickable {
  cursor: pointer;
  &.hover-effect:hover {
    filter: brightness(0.85);
    -webkit-filter: brightness(0.85);
  }
}

@import "components/panel";
@import "components/dialog";
@import "components/form";
@import "components/button";
@import "components/table";
@import "components/tooltip";
@import "components/dropdown";
@import "components/accordion";
@import "components/collection";
@import "components/modal";
@import "components/slider";
