glittergallery/GlitterGallery

@mixin bar-styling{
  font-size: 0.9em;
  padding: 0;
  @include cf();
  div{
    padding: 1em 0;
    text-align: center;
    font-size: 0.8em;
    cursor: pointer;
    p{
      text-decoration: none;
      color: $map_blue;
    }
  }
  .active, div:hover{
      background-color: $dark_geometry_gray;
    p{
      color:$map_blue;
      font-weight: 700;
    }
  }
}

@media screen and (min-width: 0em){
  body{
    .wrapper{
      article{
        section.toolbar{
          @include bar-styling;

          span.count {
            padding: 0.2em 0.5em;
            background-color: #eee;
            border-radius: 5px;
          }
        }
        section.action{
          @include bar-styling;
          div{
            background-color: $geometry_gray;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 20em){
  body{
    .wrapper{
      article{
        section.toolbar{
          div{
            @include span(1/5);
            text-align: center;
            border-bottom: solid 0.1em $dark_geometry_gray;
          }
          .active, div:hover{
            border-bottom: solid 0.1em $map_blue;
          }
        }
        section.action{
          border-bottom: solid 0.1em $dark_geometry_gray;
          div{
            @include span(1/4);
            text-align: center;     
          }
        }
      }
    }
  }
}