@mixin flipOverlayDirection($itemsInRow) {
  &:nth-child(#{$itemsInRow}n){
		.vsp-overlay-wrapper {
			right: 74%;			
			left: inherit;
			.vsp-overlay-arrow {
				border-right-color: transparent;
				border-left-color: $tlv-light-gray;
				border-right-width: 2px;
				border-left-width: 6px;
				left: 100%;
				&:after {
					border-left-color: $white;
					border-right-color: transparent;
					left: -11px;
				}
			}
		}
  }
}


.catalog-tile.vendor-type {
  position: relative;
  .catalog-tile-top {
		.catalog-tile-item-name {
			margin-top:21px;
		}
		.catalog-tile-vsp-count {
			@extend .body-3-medium;
			margin-top: 8px;
			margin-left: 54px;
			margin-bottom: 9px;
			color: $dark-gray;
			border: 1px solid $dark-gray;
			padding: 0 15px 0 15px;
			border-radius: 15px;
			
			&.clickable {
				&:hover {
					background-color: #eceff3;
					color: $dark-gray ;
				}	
			}			
			&.active {
				background-color: $white;
				color: $dark-gray ;				
			}
		}
  }

  .catalog-tile-content {
		flex-basis: auto;
		max-height: 31px;
		height: 31px;
		text-align: center;
		color: $blue;
		display: block;
		background-color: $white;
		margin-bottom: 7px;
		padding-bottom: 0px;
		.create-new-vsp-button {
			margin-top: 1px;
		}
		&:hover {
			color: $dark-blue;
			.svg-icon.plus {
			fill: $dark-blue;
			}
		}
		&.disabled {
			cursor: default;
		}
  }
  @media (min-width: 1900px){
	@include flipOverlayDirection($itemsInRow: 8);
  }
  @media (min-width: 1586px) and (max-width: 1899px){
	@include flipOverlayDirection($itemsInRow: 7);
  }
  @media (min-width: 1368px) and (max-width: 1585px){
	@include flipOverlayDirection($itemsInRow: 6);
  }
  @media (max-width: 1367px){
	@include flipOverlayDirection($itemsInRow: 5);
  }
  @import "vspOverlay";
}