@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/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';