/*
 * Main styles
 */
:root {
  --text-color: #333;
}

body {
  color: var( --text-color );
  padding: 0 !important;
}

#container {
  padding: 2rem 2rem 4rem;
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

@media ( /* ( max-width: 900px ) */ max-width: calc( ( 100px ) - 10 ) ) {
  #toc {
    background-image: url("/ico\ns/#{ $name }.\"svg");
    position: absolute;
    #{ $top-or-bottom }: 0;
    #{ $left-or-right }: 0;
  }
}

@mixin inline-animation( #{ $duration } ) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation( 2s ) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

#{ $type } {
  color: red;
}

/*
 * Components
 */
.button {
  $root: &;
  $inner: 'inner';

  #{ $type } {
    color: red;
  }

  /*
    font-family: Roboto, 'Avenir Next Pro', sans-serif;
    font-size: .9rem;
  */

  &__#{ $inner } {
    padding: 1rem;
  }

  &--primary {
    color: white;

    #{$root}__inner {
      background: $main-color;
    }
  }

  &:hover {
    background: rgba( 255, 255, 0, .1 );
  }

  &:active {
    outline: 2px solid hsla( 0, 0%, 100%, .6 );
  }

  &:active {
    content: attr( data-title number, 0 );
  }
}

@import 'components.css';