#g5-container {//wrapper
    #styles h2[data-g-collapse] {
        .g-tooltip {
            &:before {
                left: 0.3rem;
                bottom: 2rem;
            }

            &:after {
                left: -0.5rem;
                bottom: 2.4rem;
            }
        }

        i {
            vertical-align: middle;
            cursor: pointer;
            display: inline-block;
            border: 1px solid #ccc;
            color: #aaa;
            border-radius: 3px;
            line-height: 1rem;
            padding: 0 0 3px;
            font-size: 1rem;

            &:hover:before {
                bottom: 1.65rem;
                left: 0.25rem;
            }

            &:hover:after {
                left: -0.5rem;
                bottom: 2rem;
            }
        }

        &.g-collapsed-main i {
            transform: rotate(180deg);
        }
    }

    .g-preset-match {
        .swatch-matched, .swatch-title-matched {
            display: inline-block;
        }
    }

    .swatch-matched, .swatch-title-matched {
        display: none;
    }

    .swatches-block {
		margin: 0 -1px;
		padding-bottom: $content-padding;
		.g-block {
			text-align: center;
			margin: 0 1px;
		}
		@include breakpoint(mobile-only) {
			.g-block {
				flex: 0 25%;
			}
		}
		.swatch {
			display: block;
			padding: 4px;
			max-width: 350px;
			background: $white;
			margin: 0 auto;
			border-radius: $core-border-radius;
			border: 1px solid $medium-gray;
			position: relative;
            &:focus {
                box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
            }
		}

		.swatch-image {
			display: block;
            margin-bottom: 2px;
		}
	}

    .swatch-colors {
      display: block;
      height: 15px;
    }

    .swatch-preview, .swatch-matched {
    	position: absolute;
    	top: 4px;
    	right: 4px;
    	color: $white;
    	background: rgba(0,0,0,0.4);
        border: none;
    	padding: 0.5rem;
    	border-radius: 0 0 0 $core-border-radius;
    	transition: background 0.2s;
    	i {
    		font-size: $core-font-size + 0.2;
    	}
    	&:hover {
    		background: rgba(0,0,0,0.7);
    	}
    }

    .swatch-matched {
        right: inherit;
        left: 4px;
        cursor: default;
        color: $yellow;
        transition: none;

        &:hover {
            background: rgba(0,0,0,0.4);
        }
    }

    .swatch-description {
    	display: inline-block;
    	margin: 4px 0;
    	background: $white;
    	border: 1px solid #ddd;
    	border-radius: $core-border-radius;
    	padding: 0.1rem 0.4rem;
    	font-weight: 500;
    }
}