3scale/porta

@import 'provider/layouts/main';

html {
  @include typography-base();
}

body {
  text-align: center;
  //@include debug-vertical-rhythm;
}

main > h1,
main > h2 {
  font-weight: $font-weight-light;
}

main > h1:first-child,
main > h2:first-child {
  background-color: $body-background;
  margin: line-height-times(-1);
  margin-bottom: line-height-times(1);
  padding: line-height-times(1);
}

h1 {
  font-size: $main-title-font-size;
  font-weight: $font-weight-light;
  padding-top: line-height-times(1/3);
  margin-bottom: line-height-times(2/3);

  a {
    text-decoration: none;
  }
}

h2, h3 {
  margin-bottom: line-height-times(1/2);
}

#cboxWrapper h2,
.pf-c-page__main-section h2 {
  font-weight: $font-weight-bold;
  font-size: $secondary-title-font-size;
}

.pf-c-page__main-section h3 {
  font-size: $sub-title-font-size;
  margin-bottom: 0;

  em {
    font-style: italic;
  }
}

p {
  margin: line-height-times(1/2) 0 line-height-times(1) 0;
}

// HACK: this gives card-like style to all pre-existing divs
:not(.pf-c-content) > h1 + p,
:not(.pf-c-content) > h2 + p {
  background-color: $body-background;
  margin-bottom: line-height-times(1);
  padding: line-height-times(1);
}

main > p:not(:first-child) {
  @include white-box-shadow;
  padding: line-height-times(1);
}

main > h1:first-child + p,
main > h2:first-child + p {
  box-shadow: none;
  margin: line-height-times(-2) line-height-times(-1) line-height-times(1);
}

dd p {
  margin: 0;
}

pre  {
  margin: line-height-times(1/2) 0;
}

* {
  margin: 0;
}

ul, p, ol, dl {
  padding: 0;
}

p + ul {
  list-style: none;
  padding-left: line-height-times(2/3);
}

%dl {
  padding: 0;
  margin-top: line-height-times(1/2);
  margin-bottom: line-height-times(1/2);
  display: block;
}

%dt {
  //color: $label-color;
  float: left;
  margin: 0;
  //text-align: right;
  width: 40%;;
  clear: left;
  padding-top: line-height-times(1/2);

  &::after {
    //content: ':';
  }
}

%dd {
  min-height: line-height-times(2);
  padding: line-height-times(1/2) 0 line-height-times(1/2) 40%;
  border-bottom: $border-width solid $border-color;
  list-style: none;
}

.u-dl {
  @extend %dl;

  &--skinny {
    margin: 0;
    padding: 0;
  }
}

.u-dl-term {
  @extend %dt;

  &--check {
    width: line-height-times(2);
  }
}

.u-dl-definition {
  word-break: break-word;
}

.u-dl-definition,
.u-dl-description {
  @extend %dd;

  .action {
    float: right;
  }

  &--check {
    padding-left: line-height-times(2);
  }
}

a img {
  border: none;
}

pre code {
  border-radius: $border-radius;
  margin: line-height-times(1/2) 0 line-height-times(1);
  overflow: hidden;
  padding: line-height-times(1/2);
  background-color: $light-background-color;
  border: $border-width solid $border-color;


  &:hover {
    overflow: auto;
  }
}

.u-divider {
  height: line-height-times(1);
  margin: line-height-times(1/2) 0;
}

.u-subtle {
  color: $label-color;
}

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

.u-hr,
hr, {
  border: 0;
  border-bottom: $border-width solid $border-color;
}

::selection {
  background: $select-color;
}

::-moz-selection {
  background: $select-color;
}

.ui-sortable-handler {
  color: $success-color;
  cursor: move;
}

.pf-m-force-float-right {
  float: right !important; /* scss-lint:disable ImportantRule */
}