#lwaReleasesListMount {
	&.loading {
		min-height:100px;
		position:relative;
		
		&::before {
			width: 100%;
			height: 100px;
			text-align: center;
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			content: "Loading ...";
			font-size: 1.2rem;
			line-height: 100px;
			color: var(--lwa-gray-2);
		}
	}
}
.lwa-releases {
	> .wrap {
		position:relative;

		> ul {
			border-bottom:var(--lwa-border);

			> li {
				display:block;
				position:relative;
				margin: 0;

				.v-info {
					display: block;
					position: absolute;
					top: 50px;
					left: 0;
					width: 100px;
					height: 30px;
					white-space: nowrap;

					> .wrap {
						display:flex;
						flex-direction:row;
						flex-wrap:nowrap;
						border-radius:5px;

						.v-phase {
							flex: 0 0 30px;
							height:30px;
							position:relative;
							border-radius: 5px 0 0 5px;

							img {
								display:block;
								width:20px;
								height:20px;
								margin:5px auto;
							}
						}
						.v-num {
							flex: 0 0 70px;
							text-align:center;
							font-weight:700;
							height:30px;
							line-height:28px;
							border-radius:0 5px 5px 0;
						}
					}
				}
				.v-title {
					cursor: pointer;
					outline: none;
					border: 0;
					transition: .4s;
					display: block;
					width: 100%;
					text-align: left;
					padding: 0 45px 0 0;
					margin: 0;
					background-color: transparent;
					position: relative;

					.arrow {
						display:block;
						position:absolute;
						top:0;
						right:0;
						width:30px;
						height:30px;
						box-shadow:var(--lwa-shadow-1);
						border-radius:50%;
						transform:rotate(0deg);
						transition: all 320ms;

						> img {
							display:block;
							width:20px;
							height:20px;
							margin:5px auto;
							filter:var(--lwa-f-gray-3);
						}

						&:hover {
							background-color:var(--lwa-body-color);

							> img {
								filter: var(--lwa-f-white);
							}
						}
					}

					h3 {
						display: block;
						color: var(--lwa-body-color);
						margin: 0;
						font-size:1.2rem;
						padding-right: 40px;
					}

					.lead {
						margin:0;
						font-size:1.1rem;
						color:var(--lwa-gray-2);
					}

					&.active .arrow {
						transform:rotate(180deg);
						transition: all 320ms;
					}
				}
				.v-details {
					display:none;

					> p {
						margin: 10px 0;
					}

					> ul {
						margin: 0;
						padding:0 0 0 20px;
						list-style-type:none;

						> li {
							> span {	
								&:first-of-type {
									display:inline-block;
									font-weight:500;
									position:relative;
									
									&::before {
										display:block;
										position:absolute;
										content:"";
										left:-15px;
										top:8.5px;
										border-radius: 2px;
										width:7px;
										height:7px;
										background:var(--lwa-body-color);
									}
								}
								&[data-update-type="1"]::before {
									background:var(--lwa-green-2);
								}
								&[data-update-type="2"]::before {
									background:var(--lwa-blue-2);
								}
								&[data-update-type="3"]::before {
									background:var(--lwa-red-2);
								}
							}
						}
					}
				}
			}

			> li.i-phase {
				&:last-of-type {
					padding: 50px 0 50px 130px;
				}
				.v-info {
					> .wrap {
						.v-phase {
							background-color: var(--lwa-version-bg-1);

						 &::before {
							 display:block;
							 position:absolute;
							 content:"";
							 top:-5px;
							 left:0;
							 width:30px;
							 height:5px;
							 background-color: var(--lwa-bg-color-2);
						 }
						}
						.v-num {
							background-color: var(--lwa-version-bg-2);
						}
					}
				}
			}
			
			> li.i-release, > li.i-phase {
				padding: 50px 0 0 130px;
			}
			
			> li.i-current {
				border-top:var(--lwa-border);
				padding: 50px 0 50px 130px;

				.v-title h3:first-letter {
					text-transform:uppercase;
				}
			}

			> li.i-release {
				&::before {
					display:block;
					content:"";
					width:4px;
					height:calc(100%);
					position:absolute;
					top:60px;
					left:14px;
					background-color:#cdcdcd;
				}

				.v-info > .wrap > .v-phase::before {
					position:absolute;
					display:block;
					top:8px;
					left:9px;
					width:12px;
					height:12px;
					content:"";
					border-radius:50%;
					background-color:var(--lwa-gray-2);
					border:1px solid var(--lwa-black);
					outline:5px solid var(--lwa-bg-color-2);
				}
			}
		}
	}
}

@media only screen and (max-width: 480px) {
	.lwa-releases {
		> .wrap {
			> ul > li {
				padding-left: 0 !important;
				padding-top:100px !important;
				
				&.i-release {
					&::before {
						display:none;
					}
					.v-info {
						> .wrap {
							.v-num {
								background-color: var(--lwa-version-bg-2);
							}
							.v-phase {
								background-color: var(--lwa-version-bg-1);
								&::before {outline:0;}
							}
						}
					}
				}
			}
		}
	}
}