/// _components.frame.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2; fill-column: 80 -*-

.c-frame {
  background-color: $pf-frame-background;
  border-radius: $pf-border-radius;
}

.c-frame--first {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.c-frame--last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.c-frame--raised {
  -webkit-box-shadow: 3px 3px 18px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 3px 3px 18px 0px rgba(0,0,0,0.5);
  box-shadow: 3px 3px 18px 0px rgba(0,0,0,0.5);
}

/*
 * See https://github.com/evankarageorgos/hue
 *
 * The following classes can be added to the page's body.
 */
.c-frame--earlyMorning {
  min-height: 100%;
  background:
    linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%),
    radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
  background-blend-mode: screen;
}

.c-frame--air {
  min-height: 100%;
  background:
    linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%),
    linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  background-blend-mode: normal,color-burn;
}
