@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/components/OrderedItems/style.js

@@ -0,0 +1,783 @@
+import styled from 'styled-components';
+const OrderedItemsStyle = styled.div `
+	--account_orderItemsMarginTop: var(--sp16x);
+	--account_spaceLineMarginTop: var(--sp3x);
+	--account_spaceLineMarginBot: var(--sp5x);
+	--account_orderItemsTitleWrapPB: var(--sp3x);
+
+	--account_itemWrapPadTB: var(--sp5x);
+	--account_L: var(--sp1x);
+	--account_imageWidth: 3.75vw;
+	--account_imageHeight: 125.5%;
+	--account_col1RightWrapML: var(--sp4x);
+	--account_rightFirstItemWrapMTop: var(--sp3x);
+	--account_rightSecondItemWrapMTop: var(--sp1-5x);
+
+	//! Col's width
+	--account_col1Width: 50%;
+	--account_col2Width: 8%;
+	--account_col3Width: 21%;
+	--account_col4Width: calc(100% - var(--account_col1Width) - var(--account_col2Width) - var(--account_col3Width));
+
+	//! Col's distance
+	--account_col1Distance: var(--sp5x);
+	--account_col2Distance: var(--sp5x);
+	--account_col3Distance: var(--sp10x);
+	--account_col4Distance: var(--sp5x);
+
+	//! Review sizes
+	--account_reviewWrapMTop: var(--sp4x);
+	--account_reviewDescMTop: var(--sp1-5x);
+	--account_reviewInfoIconDistance: var(--sp1-5x);
+
+	--account_editorTitleMBot: var(--sp2x);
+	--account_editorParagraphMTop: var(--sp4x);
+	--account_readTimeMTop: var(--sp4x);
+	--account_sliderWrapMTop: var(--sp8x);
+	--account_sliderButtonsMTop: var(--sp6x);
+	--account_sliderBtnDistance: var(--sp3x);
+	--account_swiperItemDistance: var(--sp3x);
+	--account_swiperItemWidth: 18.05vw;
+	--account_proportion: 126.1%;
+	--account_verticalLineDistance: var(--sp4x);
+
+	margin-top: var(--account_orderItemsMarginTop);
+
+	.line {
+		width: 100%;
+		border-bottom: 2px solid var(--account_primaryColor1);
+		margin-top: var(--account_spaceLineMarginTop);
+		margin-bottom: var(--account_spaceLineMarginBot);
+	}
+
+	.price-block {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.order-items-table-wrap {
+		overflow: hidden;
+
+		.titles-wrap,
+		.items-wrap {
+			margin-left: calc(-1 * calc(var(--account_col1Distance) / 2));
+			margin-right: calc(-1 * calc(var(--account_col4Distance) / 2));
+		}
+
+		.titles-wrap {
+			display: flex;
+			border-bottom: 1px solid var(--account_primaryColor5);
+			padding-bottom: var(--account_orderItemsTitleWrapPB);
+		}
+
+		.tl-col-1 {
+			width: var(--account_col1Width);
+			padding-left: calc(var(--account_col1Distance) / 2);
+			padding-right: calc(var(--account_col1Distance) / 2);
+		}
+
+		.tl-col-2 {
+			width: var(--account_col2Width);
+			padding-left: calc(var(--account_col2Distance) / 2);
+			padding-right: calc(var(--account_col2Distance) / 2);
+		}
+
+		.tl-col-3 {
+			width: var(--account_col3Width);
+			padding-left: calc(var(--account_col3Distance) / 2);
+			padding-right: calc(var(--account_col3Distance) / 2);
+		}
+
+		.tl-col-4 {
+			width: var(--account_col4Width);
+			padding-left: calc(var(--account_col4Distance) / 2);
+			padding-right: calc(var(--account_col4Distance) / 2);
+		}
+	}
+
+	.item-wrap {
+		display: flex;
+		flex-direction: column;
+		border-bottom: 1px solid var(--account_primaryColor5);
+		padding: var(--account_itemWrapPadTB) 0;
+
+		.col-item {
+			.image-wrapper {
+				overflow: hidden;
+				max-width: var(--account_imageWidth);
+				width: 100%;
+				height: fit-content;
+				border-radius: var(--account_imageBorderRadius);
+				isolation: isolate;
+
+				.image-cont {
+					padding-top: var(--account_imageHeight) !important;
+				}
+			}
+		}
+
+		.item-inner-wrapper {
+			display: flex;
+		}
+	}
+
+	.col-item-1 {
+		display: flex;
+
+		.col-1-right-wrap {
+			flex: 1;
+			margin-left: var(--account_col1RightWrapML);
+
+			.btn-wrap {
+				margin-bottom: 0 !important;
+			}
+
+			.right-first-item-wrap,
+			.right-second-item-wrap {
+				display: flex;
+				align-items: center;
+			}
+
+			.right-first-item-wrap {
+				margin-top: var(--account_rightFirstItemWrapMTop);
+			}
+
+			.right-second-item-wrap {
+				margin-top: var(--account_rightSecondItemWrapMTop);
+			}
+		}
+	}
+
+	.order-items-review-wrapper {
+		width: 100%;
+		margin-top: var(--account_reviewWrapMTop);
+		padding-left: calc(var(--account_col1Distance) / 2);
+		padding-right: calc(var(--account_col4Distance) / 2);
+
+		.order-items-review-inner-wrapper {
+			margin-left: calc(var(--account_imageWidth) + var(--account_col1RightWrapML));
+			border-top: 1px solid var(--account_primaryColor5);
+			padding-top: var(--account_reviewWrapMTop);
+			overflow: hidden;
+
+			.review-title {
+				margin-bottom: var(--account_editorTitleMBot);
+			}
+
+			.recommended {
+				margin-top: var(--account_editorParagraphMTop);
+			}
+
+			.review-description-wrapper {
+				h5,
+				h6 {
+					margin-top: 0;
+					margin-bottom: var(--account_editorTitleMBot);
+				}
+
+				p:not(:first-child) {
+					margin-top: 0;
+				}
+
+				p:nth-child(n + 3) {
+					margin-top: var(--account_editorParagraphMTop);
+				}
+			}
+
+			.read-time {
+				margin-top: var(--account_readTimeMTop);
+			}
+
+			.slider-wrapper {
+				margin-top: var(--account_sliderWrapMTop);
+
+				.swiper {
+					display: flex;
+					margin-left: calc(-1 * calc(var(--account_swiperItemDistance) / 2));
+					margin-right: calc(-1 * calc(var(--account_swiperItemDistance) / 2));
+
+					.image-item-wrap {
+						width: var(--account_swiperItemWidth) !important;
+						padding: 0 calc(var(--account_swiperItemDistance) / 2);
+
+						.image-cont {
+							--imagePaddingTop: var(--account_proportion) !important;
+						}
+					}
+				}
+
+				.swiper-btn-wrapper {
+					display: flex;
+					align-items: center;
+
+					.btn-wrap {
+						margin-top: var(--account_sliderButtonsMTop);
+
+						&.swiper-button-disabled {
+							button,
+							a {
+								pointer-events: none;
+								border: 2px solid var(--account_primaryColor6);
+
+								i {
+									&:before {
+										color: var(--account_primaryColor6);
+									}
+								}
+
+								@media (hover: hover) {
+									&:hover {
+										color: var(--account_primaryColor6);
+										background-color: var(--account_backgroundColor);
+										border: 2px solid var(--account_primaryColor6);
+									}
+								}
+							}
+						}
+
+						&.swiper-button-lock {
+							display: none !important;
+						}
+
+						&:first-child {
+							margin-right: var(--account_sliderBtnDistance);
+						}
+					}
+				}
+			}
+
+			.admin-reply-wrapper {
+				margin-top: var(--account_sliderWrapMTop);
+				border-left: 2px solid var(--account_primaryColor1);
+				padding-left: var(--account_verticalLineDistance);
+			}
+		}
+
+		.order-items-review-buttons-wrapper {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			margin: 0 calc(var(--account_reviewWrapMTop) / -2);
+			margin-top: var(--account_reviewWrapMTop);
+
+			.btn-wrap,
+			.review-warning-wrapper {
+				margin: 0 calc(var(--account_reviewWrapMTop) / 2);
+			}
+		}
+
+		.btn-wrap {
+			margin-bottom: 0 !important;
+
+			&.outline-version {
+				button,
+				a {
+					white-space: nowrap;
+					color: var(--account_primaryColor1);
+					border: 2px solid var(--account_primaryColor1);
+
+					@media (hover: hover) {
+						&:hover {
+							background-color: var(--account_primaryColor1);
+							color: var(--account_backgroundColor);
+						}
+					}
+				}
+			}
+
+			&.full-width-version {
+				button,
+				a {
+					white-space: nowrap;
+					color: var(--account_backgroundColor);
+					background-color: var(--account_primaryColor1);
+					border: 2px solid var(--account_primaryColor1);
+
+					@media (hover: hover) {
+						&:hover {
+							color: var(--account_primaryColor1);
+							background-color: var(--account_backgroundColor);
+							border: 2px solid var(--account_primaryColor1);
+						}
+					}
+				}
+			}
+		}
+
+		.review-warning-wrapper {
+			display: flex;
+			margin-top: var(--account_reviewDescMTop);
+
+			i {
+				height: fit-content;
+				margin-right: var(--account_reviewInfoIconDistance);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_orderItemsMarginTop: var(--sp11x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp4x);
+		--account_orderItemsTitleWrapPB: var(--sp3x);
+
+		--account_itemWrapPadTB: var(--sp4x);
+		--account_col1RightWrapML: var(--sp3x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp1x);
+
+		//! Col's width
+		--account_col1Width: 50%;
+		--account_col2Width: 8%;
+		--account_col3Width: 21%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp4x);
+		--account_col2Distance: var(--sp4x);
+		--account_col3Distance: var(--sp11x);
+		--account_col4Distance: var(--sp4x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp3x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1-5x);
+		--account_editorParagraphMTop: var(--sp3x);
+		--account_readTimeMTop: var(--sp3x);
+		--account_sliderWrapMTop: var(--sp6x);
+		--account_sliderButtonsMTop: var(--sp5x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp2x);
+		--account_swiperItemWidth: 17.71vw;
+		--account_verticalLineDistance: var(--sp3x);
+
+		--account_imageWidth: 4.2vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp4x);
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_itemWrapPadTB: var(--sp3x);
+		--account_col1RightWrapML: var(--sp3x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp0-5x);
+
+		//! Col's width
+		--account_col1Width: 44%;
+		--account_col2Width: 12%;
+		--account_col3Width: 22%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp6x);
+		--account_col2Distance: var(--sp6x);
+		--account_col3Distance: var(--sp8x);
+		--account_col4Distance: var(--sp8x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp3x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp3x);
+		--account_readTimeMTop: var(--sp3x);
+		--account_sliderWrapMTop: var(--sp5x);
+		--account_sliderButtonsMTop: var(--sp4x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp2x);
+		--account_verticalLineDistance: var(--sp3x);
+		--account_swiperItemWidth: 17.89vw;
+
+		--account_imageWidth: 4.8vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp3x);
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_itemWrapPadTB: var(--sp3x);
+		--account_col1RightWrapML: var(--sp3x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp0-5x);
+
+		//! Col's width
+		--account_col1Width: 45%;
+		--account_col2Width: 13%;
+		--account_col3Width: 21%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp6x);
+		--account_col2Distance: var(--sp6x);
+		--account_col3Distance: var(--sp8x);
+		--account_col4Distance: var(--sp8x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp3x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp3x);
+		--account_readTimeMTop: var(--sp3x);
+		--account_sliderWrapMTop: var(--sp5x);
+		--account_sliderButtonsMTop: var(--sp4x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp2x);
+		--account_verticalLineDistance: var(--sp3x);
+		--account_swiperItemWidth: 17.99vw;
+
+		--account_imageWidth: 4.5vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp3x);
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_itemWrapPadTB: var(--sp3x);
+		--account_col1RightWrapML: var(--sp2x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp1x);
+		--account_imageBorderRadius: var(--sp0-5x);
+
+		//! Col's width
+		--account_col1Width: 43.5%;
+		--account_col2Width: 14.5%;
+		--account_col3Width: 21%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp7x);
+		--account_col2Distance: var(--sp7x);
+		--account_col3Distance: var(--sp7x);
+		--account_col4Distance: var(--sp7x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp2x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp3x);
+		--account_readTimeMTop: var(--sp3x);
+		--account_sliderWrapMTop: var(--sp5x);
+		--account_sliderButtonsMTop: var(--sp3x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp2x);
+		--account_verticalLineDistance: var(--sp2-5x);
+		--account_swiperItemWidth: 18.43vw;
+
+		--account_imageWidth: 4.4vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp3x);
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_itemWrapPadTB: var(--sp3x);
+		--account_col1RightWrapML: var(--sp1x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp1x);
+		--account_imageBorderRadius: var(--sp0-5x);
+
+		//! Col's width
+		--account_col1Width: 46.5%;
+		--account_col2Width: 13.5%;
+		--account_col3Width: 20%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp3x);
+		--account_col2Distance: var(--sp3x);
+		--account_col3Distance: var(--sp3x);
+		--account_col4Distance: var(--sp3x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp2x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp2x);
+		--account_readTimeMTop: var(--sp2x);
+		--account_sliderWrapMTop: var(--sp4x);
+		--account_sliderButtonsMTop: var(--sp3x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp1-5x);
+		--account_verticalLineDistance: var(--sp2-5x);
+		--account_swiperItemWidth: 18.26vw;
+
+		--account_imageWidth: 3.92vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: var(--sp2x);
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_itemWrapPadTB: var(--sp3x);
+		--account_imageBorderRadius: var(--sp0-5x);
+		--account_col1RightWrapML: var(--sp2x);
+		--account_rightFirstItemWrapMTop: var(--sp2x);
+		--account_rightSecondItemWrapMTop: var(--sp1x);
+
+		//! Col's width
+		--account_col1Width: 44%;
+		--account_col2Width: 16%;
+		--account_col3Width: 20%;
+
+		//! Col's distance
+		--account_col1Distance: var(--sp5x);
+		--account_col2Distance: var(--sp5x);
+		--account_col3Distance: var(--sp9x);
+		--account_col4Distance: var(--sp9x);
+
+		//! Review sizes
+		--account_reviewWrapMTop: var(--sp2x);
+		--account_reviewDescMTop: var(--sp1x);
+		--account_reviewInfoIconDistance: var(--sp1x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp2x);
+		--account_readTimeMTop: var(--sp2x);
+		--account_sliderWrapMTop: var(--sp3x);
+		--account_sliderButtonsMTop: var(--sp3x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp1x);
+		--account_verticalLineDistance: var(--sp2-5x);
+		--account_swiperItemWidth: 17.83vw;
+
+		--account_imageWidth: 7.4vw;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_orderItemsMarginTop: var(--sp8x);
+		--account_spaceLineMarginTop: var(--sp2x);
+		--account_spaceLineMarginBot: 0;
+		--account_orderItemsTitleWrapPB: var(--sp2x);
+
+		--account_editorTitleMBot: var(--sp1x);
+		--account_editorParagraphMTop: var(--sp2x);
+		--account_readTimeMTop: var(--sp2x);
+		--account_sliderWrapMTop: var(--sp3x);
+		--account_sliderButtonsMTop: var(--sp3x);
+		--account_sliderBtnDistance: var(--sp2x);
+		--account_swiperItemDistance: var(--sp1x);
+		--account_verticalLineDistance: var(--sp2-5x);
+		--account_swiperItemWidth: 67.15vw;
+		--account_proportion: 131.9%;
+
+		.order-items-table-wrap {
+			.titles-wrap {
+				display: none;
+			}
+
+			.items-wrap {
+				margin-left: unset;
+				margin-right: unset;
+			}
+		}
+
+		.mobile-order-item-wrap {
+			border-bottom: 1px solid var(--account_primaryColor5);
+			padding: var(--sp3x) 0;
+
+			.mobile-order-item-inner-wrap {
+				display: flex;
+
+				.mobile-image-wrap {
+					overflow: hidden;
+					border-radius: var(--sp1x);
+					isolation: isolate;
+					max-width: 22%;
+					width: 100%;
+					height: fit-content;
+
+					.image-cont {
+						padding-top: 125% !important;
+					}
+				}
+
+				.mobile-info-wrap {
+					flex: 1;
+					margin-left: var(--sp2x);
+
+					.btn-wrap {
+						margin-bottom: 0 !important;
+					}
+
+					.mobile-info-item {
+						display: flex;
+						align-items: center;
+						margin-top: var(--sp1x);
+					}
+
+					.mobile-price-wrap,
+					.mobile-total-price-wrap {
+						margin-top: var(--sp3x);
+					}
+				}
+			}
+		}
+
+		.order-items-mobile-review-wrapper {
+			margin-top: var(--sp3x);
+			border-top: 1px solid var(--account_primaryColor5);
+			padding-top: var(--sp3x);
+
+			.review-title {
+				margin-bottom: var(--account_editorTitleMBot);
+			}
+
+			.recommended {
+				margin-top: var(--account_editorParagraphMTop);
+			}
+
+			.review-description-wrapper {
+				h5,
+				h6 {
+					margin-top: 0;
+					margin-bottom: var(--account_editorTitleMBot);
+				}
+
+				p:not(:first-child) {
+					margin-top: 0;
+				}
+
+				p:nth-child(n + 3) {
+					margin-top: var(--account_editorParagraphMTop);
+				}
+			}
+
+			.read-time {
+				margin: var(--account_readTimeMTop) 0;
+			}
+
+			.slider-wrapper {
+				margin: var(--account_sliderWrapMTop) 0;
+
+				.swiper {
+					display: flex;
+					margin-left: calc(-1 * calc(var(--account_swiperItemDistance) / 2));
+					margin-right: calc(-1 * calc(var(--account_swiperItemDistance) / 2));
+
+					.image-item-wrap {
+						width: var(--account_swiperItemWidth) !important;
+						padding: 0 calc(var(--account_swiperItemDistance) / 2);
+
+						.image-cont {
+							--imagePaddingTop: var(--account_proportion) !important;
+						}
+					}
+				}
+
+				.swiper-btn-wrapper {
+					display: flex;
+					align-items: center;
+
+					.icon {
+						margin-top: var(--account_sliderButtonsMTop);
+						margin-bottom: 0 !important;
+
+						&.swiper-button-disabled {
+							button,
+							a {
+								pointer-events: none;
+								border: 2px solid var(--account_primaryColor6);
+
+								i {
+									&:before {
+										color: var(--account_primaryColor6);
+									}
+								}
+
+								@media (hover: hover) {
+									&:hover {
+										color: var(--account_primaryColor6);
+										background-color: var(--account_backgroundColor);
+										border: 2px solid var(--account_primaryColor6);
+									}
+								}
+							}
+						}
+
+						&.swiper-button-lock {
+							display: none !important;
+						}
+
+						&:first-child {
+							margin-right: var(--account_sliderBtnDistance);
+						}
+					}
+				}
+			}
+
+			.admin-reply-wrapper {
+				margin-top: var(--account_sliderWrapMTop);
+				border-left: 2px solid var(--account_primaryColor1);
+				padding-left: var(--account_verticalLineDistance);
+			}
+
+			.outline {
+				width: 100%;
+				margin-bottom: 0 !important;
+
+				&.outline-version {
+					button,
+					a {
+						color: var(--account_primaryColor1);
+						border: 2px solid var(--account_primaryColor1);
+
+						@media (hover: hover) {
+							&:hover {
+								background-color: var(--account_primaryColor1);
+								color: var(--account_backgroundColor);
+							}
+						}
+					}
+				}
+			}
+
+			.full-width {
+				width: 100%;
+				margin-bottom: 0 !important;
+
+				&.full-width-version {
+					button,
+					a {
+						color: var(--account_backgroundColor);
+						background-color: var(--account_primaryColor1);
+						border: 2px solid var(--account_primaryColor1);
+
+						@media (hover: hover) {
+							&:hover {
+								color: var(--account_primaryColor1);
+								background-color: var(--account_backgroundColor);
+								border: 2px solid var(--account_primaryColor1);
+							}
+						}
+					}
+				}
+			}
+
+			.mobile-review-warning-wrapper {
+				display: flex;
+				margin-top: var(--sp1x);
+
+				i {
+					height: fit-content;
+					margin-right: var(--sp1x);
+				}
+			}
+		}
+	}
+`;
+export default OrderedItemsStyle;