.languages {
	position: relative;

	ul {
		position: absolute;
		top: 48px;
		right: 0;
		z-index: 999;
		background-color: var(--background-color);
		min-width: 130px;
		border: 1px solid var(--light-color);
		border-radius: 15px;
		box-shadow: var(--box-shadow);
		overflow: hidden;

		button {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			padding: 8px 16px;
			font-size: .9em;
			transition: .3s ease background-color;

			&:hover,
			&:focus {
				background-color: var(--light-color);
			}

			.fi {
				margin-right: 10px;
				width: 1.2em;
			}
		}
	}

	&__current {
		padding: 8px 16px;
		transition: .3s ease background-color;
		border-radius: 32px;

		&:hover,
		&:focus {
			background-color: var(--light-color);
		}

		span,
		svg {
			display: inline-block;
			vertical-align: middle;
		}

		span {
			text-transform: uppercase;
			font-size: .9em;
		}

		svg {
			margin-left: 10px;
			width: 8px;
			fill: var(--default-color);
			transition: .3s ease transform;
			transform-origin: center;
		}

		&.active {
			svg {
				transform: rotate(180deg);
			}
		}
	}
}