@mixin sai-hexagon-color($color) {
    color: $white;
    background-image: sai-hexagon-svg('176px', '204px', $color, $color);

    &.hollow {
        color: $color;
        background-image: sai-hexagon-svg('176px', '204px', $color, $white);
    }
}

@mixin sai-hexagon($width, $height, $stroke-color: $dark-gray, $fill-color: $dark-gray) {
    position: relative;
    width: $width;
    height: $height;
    margin: rem-calc(0 20);
    padding: rem-calc(10);
    text-align: center;

    &:before { // Needed to center .title element
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .title {
        display: inline-block;
        vertical-align: middle;
        font-family: "Lora Bold";
        font-size: rem-calc(30);
    }

    @include sai-hexagon-color($dark-gray);
    background-repeat: no-repeat;

    @each $key, $value in $app-colors {
        &.#{$key} {
            @include sai-hexagon-color($value);
        }
    }
}

.#{$package-prefix}-hexagon-view {
    @include grid-column(12);
    margin: rem-calc(32 0);

    .hexagons {
        @include grid-column(6);
        @include grid-column-position(center);

        @for $i from 1 through 10 {
            &[data-itemcount="#{$i}"] {
                width: calc(30px + (#{$i} * 216px));
            }
        }

        > .hexagon {
            @include sai-hexagon(176px, 204px);
            float: left;
            
            &.logo {
                background-image: sai-image('logo.png'); 
                background-position: center center; 
                background-size: cover;
            }
        }
    }
}

.#{$package-prefix}-hexagon {
    @include sai-hexagon(176px, 204px);
}