@import "../../mixins";

.data-options {
	lost-column: 2/3 2;
	lost-align: right;
	lost-flex-container: row;
	& .data-title {
		@add-mixin font-xs;
		width: 100%;
		text-transform: uppercase;
		color: var(--light-3);
		@add-mixin body-font;
	}
	& .data-options-container {
		lost-flex-container: row;

		& a {
			padding: 5px 10px 5px 0px;
			flex-direction: row;
			display: flex;
			align-items: center;
			& img {
				width: 20px;
				height: 20px;
			}
		}

		& .option {
			@add-mixin font-xxs;
			@add-mixin body-font;
			text-align: center;
			padding: 5px 10px 5px 5px;
			margin-left: 5px;
			text-transform: uppercase;
			width: auto;
			background-color: var(--white);
			transition: background-color 0.5s, color 0.5s;
			border: 1px solid var(--light-2);
			color: var(--light-3);

			&.selected {
				background-color: var(--light-3);
			}

			&:active,
			&:hover {
				text-decoration: none;
				background-color: var(--accent);
				color: var(--white);
			}

			&.disabled {
				background-color: transparent;
				color: var(--light-3);
				cursor: not-allowed;
			}
		}
	}
}
