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

.pivot-options {
	lost-column: 1/3 2;
	lost-align: left;
	lost-flex-container: row;
	& .pivot-text {
		@add-mixin font-xs;
		width: 100%;
		text-transform: uppercase;
		color: var(--light-3);
		@add-mixin body-font;
	}
	& .pivot-options-container {
		lost-flex-container: row;
		& a {
			padding: 3px 6px;
      flex-direction: row;
			display: flex;
			align-items: center;
			& img {
				width: 20px;
				height: 20px;
			}
		}
		& .toggle {
			@add-mixin font-xxs;
			@add-mixin body-font;
			background-color: var(--white);
			text-align: center;
			padding: 5px 15px;
			margin-right: 5px;
			text-transform: uppercase;
			width: auto;
			transition: background-color 0.5s, color 0.5s;
			border: 1px solid var(--light-2);
			color: var(--light-3);

			&.selected {
				background-color: var(--accent);
				color: var(--white);
				border: 1px solid var(--accent);
			}

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

			&.disabled {
				border: 1px solid var(--light-2);
				background-color: transparent;
				color: var(--light-3);
			}
		}
	}
}
