@import "../../variables";

.pricing {
	display: flex;
	margin: 20px 0;
	user-select: auto !important;

	&-switch {
		display: flex;
		justify-content:center;

		&-item {
			font-size: 17px;
			padding: 10px 20px;
			border-radius: 5px;
			font-weight: 400;
			background: $white;
			color: $green;
			border: 1px solid $green;
			transition: background 0.3s ease, color 0.3s ease;

			&:first-child {
				border-radius: 5px 0 0 5px;
			}

			&:last-child {
				border-radius: 0 5px 5px 0;
			}

			&:hover {
				background-color: lighten($green, 20%);
				color: $white;
			}

			&.is-active {
				background-color: $green;
				color: $white;
			}
		}
	}

	&-item {
		cursor: pointer;
		position: relative;
		border-radius: 5px;
		margin: 0 8px;
		border: 1px solid $light-grey;
		transition: transform 0.3s ease;
		width: calc(50% - 16px);

		&:hover {
			transform: scale(1.02);
		}

		&:focus {
			outline: none;
		}

		&:last-of-type {
			margin-right: 0;
		}

		&--selected {
			border: 2px solid $green;
		}

		&-selected-label {
			color: $white !important;
			margin: 0;
			text-align: center;
			padding: 5px;
			text-transform: uppercase;
			line-height: normal !important;
			font-size: inherit !important;
			position: absolute;
			top: 0;
			right: 0;
			background: $green;
			border-bottom-left-radius: inherit;
		}

		&-offerRibbon {
		  width: 108px;
		  height: 108px;
		  overflow: hidden;
		  position: absolute;
		  top: -6px;
		  right: -6px;
		  &-content {
		    color: $white;
			font-size: 11px;
		    text-align: center;
		    text-transform: uppercase;
		    font-weight: 600;
		    transform: rotate(45deg);
		    position: relative;
		    padding: 4px 0;
		    left: -11px;
		    top: 31px;
		    width: 146px;
		    background-color: mix(white, $red, 10%);
		    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		    letter-spacing: 0.2px;
		    box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
		    sup {
		      font-size: 0.6em;
		    }
		    &::before, &::after {
		      content: "";
		      border-top: 4px solid mix(black, $red, 30%);
		      border-left: 4px solid transparent;
		      border-right: 4px solid transparent;
		      position: absolute;
		      bottom: -4px;
		    }
		    &::before {
		      content: "";
		      position: absolute;
		      left: 0px;
		      top: 100%;
		      z-index: -1;
		      border-left: 4px solid mix(black, $red, 30%);
		      border-right: 4px solid transparent;
		      border-bottom: 4px solid transparent;
		      border-top: 4px solid mix(black, $red, 30%);
		    }
		    &::after {
		      content: "";
		      position: absolute;
		      right: 0px;
		      top: 100%;
		      z-index: -1;
		      border-left: 2px solid transparent;
		      border-right: 2px solid mix(black, $red, 30%);
		      border-bottom: 2px solid transparent;
		      border-top: 2px solid mix(black, $red, 30%);
		    }
		  }
		}

		&-title {
			color: $green;
			font-size: 16px;
			font-family: Ligne, sans-serif;
			text-align: center;
			text-transform: uppercase;
			padding: 10px;
			font-weight: 600;
			padding-top: 25px;

			&-more {
				margin-top: 15px;
				color: $lightest-grey;
				font-size: 15px;
				color: $medium-grey;
				font-weight: normal;
				text-transform: none;
				color: $dark-grey;
			}
		}

		&-subtitle {
			color: $green;
			padding: 10px;
			padding-top: 0;
			text-align: center;
			font-weight: 100;

			&-price {

				&-value {
					font-size: 50px;
					font-family: Ligne, sans-serif;
					font-weight: 600;
 					margin-bottom: 5px;

					&-small {
						font-size: 30%;
					}

					&-freq {
						font-size:13px;
						margin-left:5px;
						font-weight: normal;
					}

					&-currency {
						font-size: 17px;
						position:relative;
						bottom:21px;
						right:3px;
					}
				}

				&-info {
					font-size:14px;
					margin-bottom: 6px;
					color: $dark-grey;
				}

			}
		}

		&-features {
			background-color: $lightest-grey;
			list-style-type: none;
			margin: 0;
			padding: 0;
			color: $dark-grey;
			text-align: center;
		}

		&-feature {
			padding: 10px 20px;
			border-top: solid 1px $light-grey;
			font-size: 16px;
			font-weight: 100;
			background-color: $lightest-grey;
			color: $medium-grey;
		}

		&-cta {
			cursor: pointer;
			background: $green;
			color: #fefefe;
			text-align: center;
			padding: 10px;
			font-size: 20px;
			font-weight: 100;
			transition: background 0.3s ease;
			&:hover {
				background: lighten($green, 5%);
			}
		}
	}
}
