.editor-tabs {
  display: none;
  margin: 30px 0;
  position: relative;

  &:after{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	border-bottom: 1px solid #e0e0e0;
	height: 1px;
	z-index: -1;
	right: 0;
	bottom: 0;
  }

  .long-name {
	display: none;
  }

  a {
	padding: 15px 10px 12px 0px;
	display: flex;
	align-items: center;
	font-weight: 700;
	text-decoration: none;
	font-size: 15px;
	border-bottom: 3px solid transparent;
	position: relative;
	width: auto;

	&:last-child {
	  padding-right: 0;
	}

	&:not(:first-child) {
	  margin-left: auto;
	}

	&.active {
	  border-bottom: 3px solid $blue;
	}

	.pro-badge {
	  margin-left: auto;
	  font-size: 11px;
	}
  }

  .editor {
	color: #616161;
  }

  .count {
	color: rgba(97, 97, 97, 0.5);
	margin: 0 10px;
  }

  .icon-wrap {
	display: none;
	margin-right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 100%;
	overflow: hidden;

	img {
	  max-width: 100%;
	  display: block;
	}
  }
}

.cloud-items {
	.editor-tabs {
		a {	  
		  &:not(:first-child) {
			margin-left: 20px;
		  }
		}
	}
}

@mixin ob-editor-tabs--tablet() {
}

@mixin ob-editor-tabs--laptop() {
  .editor-tabs {
	display: flex;
  }
}

@mixin ob-editor-tabs--desktop() {
  .editor-tabs {
	.icon-wrap {
	  display: block;
	}
  }
}

@mixin ob-editor-tabs--desktop-large() {
  .editor-tabs {
	a {
	  width: auto;
	  padding: 15px 20px 12px 5px;
	}
  }
}

@media (min-width: 1600px) {
  .editor-tabs {
	.long-name {
	  display: inline;
	}
  }
}