// Margin and padding
$backendbr-margin: 3rem;
$backendbr-padding: 3rem;

%section-margin {
  padding-top: $backendbr-margin !important;
  padding-bottom: $backendbr-margin !important;
}

%inter-section-margin {
  margin-top: $backendbr-margin !important;
}

%default-padding {
  padding-left: $backendbr-padding !important;
  padding-right: $backendbr-padding !important;
}

%has-default-padding {
  padding: 0 $backendbr-padding;
}

// Shadow
@mixin generate-shadow($shadow-color: #000) {
  box-shadow: 0 9px 11px rgba($shadow-color, 0.025), 0 9px 10px rgba($shadow-color, 0.035);
}

%basic-shadow {
  box-shadow: 0 9px 11px rgba(#000,0.025), 0 9px 10px rgba(#000,0.05);
}

// Title
%backendbr-styled-title {
  text-align: center;
  font-weight: bold;
  color: $text;
  @extend .is-size-3;
  padding-bottom: 1rem;

  @media screen and (min-width: $tablet) {
    text-align: left;
  }
}

%color-inherit {
  color: inherit !important;
}

.block {
  $color: darken($secondary, 18%);
  color: darken($color, 10%);
  padding: 1rem;
  border-radius: $radius;
  background-color: #fff;
  @extend %basic-shadow;
}

// icon
.svgicon {
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  overflow: hidden;
}
