/*------------------------------------*\
    STYLE EIGHT
\*------------------------------------*/
/**
 * Rectangle with black logo on white
 * background, black border
 */

/**
 * Update variables below to include media
 * queries (responsive version), control
 * padding and other variables.
 */

$include-media-queries:    true;
$icon-spacing:             6px;
$wrapper-padding:          6px;
$icon-size:                24px;
$base-font-size:           16px;
$animation-speed:          0.25s;

/**
 * Generated CSS must be combined with
 * ssbp-base in order to display correctly.
 * Allows for smaller file size when
 * combining multiple themes.
 */

@import '../modules/vars';
@import '../modules/mixins';

.ssbp--theme-8 {
	.ssbp-list {
		li {
			margin-left: $icon-spacing;
		}
	}
	.ssbp-btn {
		&:hover, &:focus, &:active {
			border-bottom: 3px solid $dark-grey;
		}
	}
	.ssbp-btn, .ssbp-btn:visited {
		@include rectangle;
		position: relative;
		border: 3px solid $dark-grey;
		background-color: #fff;
		color: $dark-grey;
		transition: $animation-speed;
		&:hover, &:focus, &:active {
			background-color: $dark-grey;
			color: #fff;
		}
	}

	// Per network share count
	.ssbp-each-share {
		padding-top: 3px;
		text-align: center;
		font-size: 12px;
	}
	.ssbp-toggle-switch {
		@extend %ssbp-toggle-switch--light;
	}
	&.ssbp--centred {
		@extend %ssbp--centred-full;	
	}
}