@charset "utf-8";

$bootstrap: #6f5499;
$github: #333333;
$twitter: #55acee;
$patreon: #f96854;
$patreon-blue: #052d49;
$fortyfour: #5f45bb;
$amazon: #ffd863;
$bleeding-green: #abf47c;
$bleeding-red: #ca1f26;
$rss: #f26522;
$algolia: #3c4fe0;

$star: #ffd257;
$purple: #b86bff;

$mauve: #8a4d76;
$pink: #fa7c91;
$rose: #ea4aaa;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
$sass: #bf4080;

$carbon-width: 300px;
$carbon-height: 100px;
$carbon-line-height: 20px;
$carbon-min-lines: 6;
$carbon-poweredby-height: 20px;
$carbon-min-height: ($carbon-line-height * $carbon-min-lines) +
  $carbon-poweredby-height;

$main-spacing: 3rem;
$intro-width: 1080px;
$sidebar-width: 10.5rem;

$radius: 0.375em;

$bd-edge-width: 11.25rem;
$bd-edge-offset: 2rem;

@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

$custom-colors: (
  "expo": (
    $star,
    $white,
    findLightColor($star),
    findDarkColor($star),
  ),
  "love": (
    $red,
    $white,
    findLightColor($red),
    findDarkColor($red),
  ),
  "patreon": (
    $patreon,
    $white,
    findLightColor($patreon),
    findDarkColor($patreon),
  ),
  "rss": (
    $rss,
    $white,
    findLightColor($rss),
    findDarkColor($rss),
  ),
  "bleeding": (
    $bleeding-green,
    findColorInvert($bleeding-green),
    findLightColor($bleeding-green),
    findDarkColor($bleeding-green),
  ),
  "sass": (
    $sass,
    $white,
    findLightColor($sass),
    findDarkColor($sass),
  ),
  "amazon": (
    $amazon,
    findColorInvert($amazon),
    findLightColor($amazon),
    findDarkColor($amazon),
  ),
  "sponsor": (
    $rose,
    $white,
    findLightColor($rose),
    findDarkColor($rose),
  ),
  "twitter": (
    $twitter,
    $white,
    findLightColor($twitter),
    findDarkColor($twitter),
  ),
  "videos": (
    $green,
    $white,
    findLightColor($green),
    findDarkColor($green),
  ),
  "extensions": (
    $cyan,
    $white,
    findLightColor($cyan),
    findDarkColor($cyan),
  ),
  "bootstrap": (
    $bootstrap,
    $white,
    findLightColor($bootstrap),
    findDarkColor($bootstrap),
  ),
);

@import "../sass/utilities/derived-variables";

$navbar-breakpoint: $tablet;

@import "../bulma";

%center {
  align-items: center;
  display: flex;
  justify-content: center;
}

@mixin selection($current-selector: false) {
  @if $current-selector {
    &::-moz-selection {
      @content;
    }
    &::selection {
      @content;
    }
  } @else {
    ::-moz-selection {
      @content;
    }
    ::selection {
      @content;
    }
  }
}

%reset {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: currentColor;
  font-family: inherit;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

%bd-box {
  background-color: $white;
  border-radius: $radius-large;
  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05);
  display: block;
}

%link-before-background {
  position: relative;

  &::before {
    @include overlay;
    background-color: $scheme-main-bis;
    border-radius: $radius-large;
    content: "";
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.1);
    transform-origin: center;
    transition-duration: $speed * 2;
    transition-property: opacity, transform;
  }

  &:hover {
    &::before {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@import "./_sass/base/css-vars";
@import "./_sass/base/custom";
@import "./_sass/base/helpers";

@import "./_sass/components/anchors";
@import "./_sass/components/options";
@import "./_sass/components/banner";
@import "./_sass/components/call";
@import "./_sass/components/carbon";
@import "./_sass/components/categories";
@import "./_sass/components/code";
@import "./_sass/components/content";
@import "./_sass/components/hero";
@import "./_sass/components/highlight";
@import "./_sass/components/klmn";
@import "./_sass/components/navbar";
@import "./_sass/components/notification";
@import "./_sass/components/pagination";
@import "./_sass/components/features";
@import "./_sass/components/links";
@import "./_sass/components/screenshots";
@import "./_sass/components/drawing";
@import "./_sass/components/variables";
@import "./_sass/components/book";
@import "./_sass/components/native";
@import "./_sass/components/fortyfour";
@import "./_sass/components/spacing-table";
@import "./_sass/components/survey";
@import "./_sass/components/color";

@import "./_sass/pages/index";
@import "./_sass/pages/docs";
@import "./_sass/pages/videos";
@import "./_sass/pages/love";
@import "./_sass/pages/expo";
@import "./_sass/pages/backers";
@import "./_sass/pages/blog";
@import "./_sass/pages/single";
@import "./_sass/pages/extensions";
@import "./_sass/pages/made-with-bulma";
@import "./_sass/pages/bootstrap";

@import "./_sass/index/hello";
@import "./_sass/index/focus";
@import "./_sass/index/focus-animations";
@import "./_sass/index/best";
@import "./_sass/index/sponsors";
@import "./_sass/index/heading";
@import "./_sass/index/columns";
@import "./_sass/index/custom";

@import "./_sass/global/support";
@import "./_sass/global/newsletter";
@import "./_sass/global/cc";

@import "./_sass/examples/mixins";

.my-element {
  background: red;

  @include from(1280px) {
    background: blue;
  }
}