@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import 'node_modules/coffeekraken-sugar/index';
@import 'node_modules/coffeekraken-s-typography-component/index';
@import 'node_modules/coffeekraken-s-button-component/index';
@import 'grid-settings';

@include s-setup((
  colors: (
    default: (
      color: #797979
    ),
    title: (
      color: s-color(#797979, -darken 20%)
    ),
    text: (
      color: s-color(#000, -opacity .5)
    )
  )
));
@include s-init();
@include s-classes();

@include s-typography-classes();
@include s-button-classes();

body {
  font-family: Roboto;
  font-weight: 400;
}

i[class^="fa"] {
  color: white;
  position: relative;

  &:after {
    content:'';
    display: block;
    width: 3em; height: 3em;
    position: absolute;
    top: -1em; left: -1em;
    background-color: s-color(primary);
    z-index: -1;
    border-radius: 50%;
  }
}

.h1, .h2, .h3, .h4 {
  color: s-color(title);
}

hr {
  margin: s-space(medium) 0;
  background-color: transparent;
  border: 1px solid s-color(secondary, -opacity .05);
}

#header {
  background-image: url(../img/fur-01.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  padding: s-space(bigger) 0;
  text-shadow: rgba(0,0,0,.3) 0 0 10px;

  &, .h1 {
    color: s-color(white);
  }
}

@include g-custom-class('my-cool-class') {
  content: 'Coco';
  content: g-state-var(name);
}

.features {
  padding: s-space(bigger) 0;
  background-color: s-color(default, -opacity .03);
}

.container--demo .gr {
  margin-top: s-space(big) !important;
  position: relative;

  &.gr--flex:not([class*="no-gutter"]):before {
    width: calc(100% - #{g-gutters(1)});
    left: calc(#{g-gutters(1) / 2});
  }

  &:before {
    position: absolute;
    bottom:100%; left:0;
    width: 100%; 
    display: block;
    color: s-color(white);
    background-color: s-color(primary);
    padding: s-space(small);
    font-size: s-rem(12px);
    content: attr(class);
  }
}

.container--demo .col {
  background: s-color(default, -opacity .05);
  border: 1px solid s-color(default, -opacity .05);
  padding: g-gutters(1);

  &:before {
    display: inline-block;
    background-color: s-color(default);
    color: white;
    padding: s-space(small);
    font-size: s-rem(12px);
    content: attr(class);
  }
}

.list {

}
.list--footer {

  .list__item {
    margin: 0 0 s-space(small) 0;

    a {
      color: s-color(default);
      text-decoration: none;
      font-size: 0.9em;

      &:hover {
        text-decoration: underline;
      }
    }
    i {
      color: s-color(default);
    }
  }
}

.footer {
  background-color: s-color(secondary);
  padding: s-space(big) 0;
  color: white;
  margin-top: s-space(big);
}

.coffeekraken-logo {
  @include s-coffeekraken-logo(white, s-color(primary));
  width: s-rem(100px);
}