@import "../../helpers";
.sf-shipping-details {
  .shipping-list {
		margin: 0 0 var(--spacer-base) 0;
	}
	.shipping {
		display: flex;
		padding: var(--spacer-base) 0;
		border: 1px solid var(--c-light);
		border-width: 1px 0 0 0;
		&:last-child {
			border-width: 1px 0 1px 0;
		}
		&__content {
			flex: 1;
			color: var(--c-text);
		}
		&__actions {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			@include for-desktop {
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
		}
		&__button-delete {
			--button-background: var(--c-light);
			--button-color: var(--c-dark-variant);
			&:hover {
				--button-background: var(--_c-light-primary);
			}
			@include for-desktop {
				margin: 0 0 0 var(--spacer-base);
			}
		}
		&__address {
			margin: 0 0 var(--spacer-base) 0;
			&:last-child {
				margin: 0;
			}
		}
	}
	.tab-orphan {
		@include for-mobile {
			--tabs-content-border-width: 0;
			--tabs-title-display: none;
			--tabs-content-padding: 0;
		}
	}
	.form {
		@include for-desktop {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		&__element {
			margin: 0 0 var(--spacer-base) 0;
			@include for-desktop {
				flex: 0 0 100%;
			}
			&--half {
				@include for-desktop {
					flex: 1 1 50%;
				}
				&-even {
					@include for-desktop {
						padding: 0 0 0 var(--spacer-lg);
					}
				}
			}
		}
		&__select {
			padding-bottom: calc(var(--font-xs) * 1.2);
		}
	}
	.message {
		margin: 0 0 var(--spacer-base) 0;
	}
	.action-button {
		--button-width: 100%;
		@include for-desktop {
			--button-width: auto;
		}
	}
	.cancel-button {
		margin-top: var(--spacer-sm);
		@include for-desktop {
			margin: 0 0 0 var(--spacer-xl);
		}
	}
}