.longFeaturesSwitch {
	padding-bottom: 64px;
	display: flex;
	align-items: center;
	justify-content: center;

	ws-icon {
		transition: all 0.3s ease-out;
		&.rotate {
			transform: rotate(180deg);
		}
	}
}

.longFeatures {
	max-width: 1440px;
	margin: 0 auto;
	transition: all 0.3s ease;
	padding-bottom: 80px;

	&.collapsed {
		height: 1px;
		overflow: hidden;
	}

	table {
		width: 100%;
		background: var(--base-greengrey-100);
		border-collapse: separate;
		border-spacing: 0;

		thead {
			tr {
				th {
					padding: 20px;
					position: sticky;
					top: var(--table-sticky-top);
					z-index: 1005;

					.tablePlanContainer {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.tablePlanContainer-name {
							color: var(--text-base-primary);
							font: var(--font-body-med-lg);
						}
						.tablePlanContainer-price {
							.planAndPrices__plan-price {
								.digit {
									display: flex;
									span {
										color: var(--text-base-primary);
										font: var(--font-body-med-sm);
									}
									.per_user {
										color: var(--text-base-tertiatry);
										font: var(--font-body-reg-xs);
										padding-left: 8px;
									}
								}
							}
						}
						.tablePlanContainer-button {
							padding-top: 20px;
							width: 100%;

							.btn {
								width: 100%;
							}
						}
						&.tablePlan-free {
							.tablePlanContainer-price {
								.planAndPrices__plan-price {
									.digit {
										opacity: 0;
									}
								}
							}
						}
					}
				}
			}
			&.is-stick {
				tr {
					th {
						background: var(--bg-surf-20);
						box-shadow: 0 2px 0 0 var(--base-greengrey-a-100);
					}
				}
			}
		}

		tbody {
			tr {
				td {
					border-bottom: 0.5px solid var(--border-mid-high);
					padding: 16px 0;

					&.feature {
						color: var(--text-base-primary, rgba(0, 0, 0, 0.93));
						font-family: var(--font-family-secondary), serif;
						font-size: var(--font-size-body-md);
						font-style: normal;
						font-weight: var(--font-weight-medium);
						line-height: var(--line-height-s);
						letter-spacing: var(--letter-spacing-regular);

						.feature-soon {
							border-radius: 6px;
							background: var(--base-greengrey-a-100);
							color: var(--text-base-secondary);
							text-align: center;
							font-family: var(--font-family-secondary), serif;
							font-size: 12px;
							font-style: normal;
							font-weight: var(--font-weight-medium);
							letter-spacing: var(--letter-spacing-regular);
							height:20px;
							display: inline-flex;
							padding: 0 6px;
							margin-left: 2px;
							justify-content: center;
							align-items: center;
						}
						/*text-decoration-line: underline;
						text-decoration-style: dotted;
						text-decoration-skip-ink: auto;
						text-decoration-color: var(--text-base-ghost);
						text-decoration-thickness: 16%;
						text-underline-offset: 16%;
						text-underline-position: from-font;*/
					}

					&.center {
						text-align: center;
						color: var(--text-base-primary);
						font: var(--font-body-reg-sm);
					}
				}

				&.group {
					td {
						padding: 40px 0 12px 0;
						div {
							color: var(--text-base-tertiatry, rgba(5, 5, 5, 0.50));
							font-family: var(--font-family-secondary), serif;
							font-size: 13px;
							font-style: normal;
							font-weight: var(--font-weight-medium);
							line-height: var(--line-height-s);
							letter-spacing: var(--letter-spacing-regular);
							text-transform: uppercase;
						}
					}
				}
			}
		}
	}
}