@import "../sass-commons/variables";
@import "../sass-commons/button";
@import "../sass-commons/media-queries";

.import-export {
	margin: 0 0 1.2rem;

	input[type="file"] {
		@include button;

		--divider-color: var(--border-color);

		padding: 0;
		max-width: 100%;

		&::file-selector-button  {
			font-family: $font-family;
			background-color: transparent;
			border: none;
			color: inherit;
			border-right: 2px solid var(--divider-color);
			height: 100%;
			padding: $button-padding;
			margin-right: $button-padding;
			transition: all 500ms ease;
		}

		&:hover {
			--divider-color: hsla(0deg 0% 100% / 50%);
		}
	}

	&__import,
	&__export {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		
		@include small-screen {
			margin-bottom: 1rem;
		}

		.label {
			font-weight: bold;
			margin-bottom: 1rem;
		}
	}

	&__import {
		margin-right: .5rem;

		@include medium-screen-up {
			max-width: 59%;
		}

		.label {
			align-self: flex-start;
		}
	}

	&__export {
		.btn {
			margin: 0;
		}
	}

	&__buttons {
		display: flex;
		justify-content: space-between;
	}

	&__include-old {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 1em;

		@include small-screen {
			a {
				align-items: baseline;
			}
		}

		svg {
			margin-left: .5em;
			margin-right: 0;
		}
	}
}
