text: //Hotkyes modal (Keyboard shortcuts)
  #elementor-hotkeys {
  	text-align: $start;
  
  	&__content {
  		display: flex;
  		width: 100%;
  		overflow: hidden;
  		margin-bottom: 30px;
  
  		@media (max-width: $editor-screen-md-max) {
  			flex-direction: column;
  		}
  	}
  
  	&__actions {
  
  		.elementor-hotkeys__list {
  			border-radius: getValueByDirection(3px 0 0 3px, 0 3px 3px 0);
  
  			@media (max-width: $editor-screen-md-max) {
  				border-radius: 3px;
  			}
  		}
  
  		.elementor-hotkeys__header,
  		.elementor-hotkeys__list {
  			@media (min-width: $editor-screen-lg-min) {
  				@include padding-end(25px);
  			}
  
  			@media (min-width: $editor-screen-xl-min) {
  				@include padding-end(50px);
  			}
  		}
  	}
  
  	&__navigation {
  
  		.elementor-hotkeys__list {
  			border-radius: getValueByDirection(0 3px 3px 0, 3px 0 0 3px);
  
  			@media (max-width: $editor-screen-md-max) {
  				border-radius: 3px;
  			}
  		}
  
  		.elementor-hotkeys__header {
  			@media (min-width: $editor-screen-lg-min) {
  				@include padding-start(25px);
  			}
  
  			@media (min-width: $editor-screen-xl-min) {
  				@include padding-start(50px);
  			}
  		}
  
  		.elementor-hotkeys__list {
  			@media (min-width: $editor-screen-lg-min) {
  				@include padding-start(15px);
  			}
  
  			@media (min-width: $editor-screen-xl-min) {
  				@include padding-start(40px);
  			}
  		}
  	}
  }
  
  .elementor-hotkeys {
  
  	&__col {
  		width: 50%;
  
  		@media (max-width: $editor-screen-md-max) {
  			width: 100%;
  		}
  	}
  
  	&__header,
  	&__list {
  		width: 100%;
  	}
  
  	&__header{
  		padding: 10px 30px;
  		font-weight: 500;
  
  		@media (max-width: $editor-screen-xs-max) {
  			padding-right: 10px;
  			padding-left: 10px;
  		}
  	}
  
  	&__list {
  		background-color: #ffffff;
  		height: calc(100% - 42px);
  		padding: 10px 20px;
  
  		@media (max-width: $editor-screen-xs-max) {
  			padding: 0;
  		}
  
  		@media (max-width: $editor-screen-md-max) {
  			margin-bottom: 30px;
  		}
  
  		@media (max-width: $editor-screen-md-max) {
  			height: auto;
  		}
  	}
  
  	&__item {
  		display: flex;
  		align-items: center;
  		padding: 20px 10px;
  		border-bottom: 1px solid $gray-lighter;
  
  		&:last-child {
  			margin-bottom: 30px;
  
  			@media (max-width: $editor-screen-xs-max) {
  				margin-bottom: 0;
  			}
  		}
  
  		&--label {
  			font-size: 13px;
  			font-weight: 400;
  			flex-grow: 1;
  		}
  
  		&--shortcut {
  			flex-grow: 0;
  			display: flex;
  
  			@if $direction == rtl {
  				flex-direction: row-reverse;
  			}
  
  			span {
  				position: relative;
  				background-color: $gray-lighter;
  				padding: 5px 12px;
  				margin-right: 27px;
  				border-radius: 3px;
  
  				@media (max-width: $editor-screen-xs-max) {
  					padding: 4px 9px;
  					margin-right: 23px;
  				}
  
  				&:after {
  					content: '+';
  					position: absolute;
  					right: -18px;
  					width: 9px;
  					text-align: center;
  
  					@media (max-width: $editor-screen-xs-max) {
  						right: -16px;
  					}
  				}
  
  				&:last-child {
  					margin-right: 0;
  
  					&:after {
  						display: none;
  					}
  				}
  			}
  		}
  	}
  }