@import "mixins";

.ck-editor {

	.ck-content {

		&.ck-editor__editable[dir] {
			text-align: justify;
		}

		a, a:visited {
		  //color: $green;
		  text-decoration: none;
		  &:hover {
		    text-decoration: underline;
		  }
		  &.btn,
		  &.button {
		    padding: 15px 30px;
		    text-decoration: none;
		    &:hover {
		      text-decoration: none;
		    }
		  }
		}
		h2, h3, h4 {
		  font-weight: bold;
		  line-height: normal;
		  a, a:visited {
		    color: #000;
		  }
		}

		h2 {
		  font-size: 32px;
		}
		h3 {
		  font-size: 24px;
		}
		h4 {
		  font-size: 18px;
		}

		.btn {
		  display: inline-block;
		  padding: 1.2rem 2rem;
		  margin: 1rem 1rem 1rem 0;
		  background-image: none;
		  font-size: 1.5rem;
		  font-weight: bold;
		  letter-spacing: 1.7px;
		  line-height: 1.3em;
		  text-align: center;
		  text-decoration: none;
		  text-shadow: none;
		  box-shadow: none;
		  white-space: normal;
		  position: relative;
		  &:hover {
		    cursor: pointer;
		  }
		}

	  img {
	    max-width: 100%;
	    height: auto;
	  }
	  iframe {
	    max-width: 100%;
	  }

	  input[type="checkbox"],
	  input[type="radio"] {
	    margin-right: 5px;
	  }

	  input[type="text"],
	  input[type="email"],
	  input[type="number"],
	  input[type="password"],
	  input[type="tel"],
	  input[type="date"],
	  input[type="time"],
	  textarea {
	    width: 100%;
	  }

		table {
		  margin-bottom: 1.5em;
		  border: 1px solid #fff !important;
			border-bottom: 0 !important;
		  border-collapse: separate !important;
		  tr {
		    th {
					//background: $green;
		      color: #fff;
					a, a:visited {
						color: currentColor;
					}
		    }
		    th,
		    td {
		      padding: 1rem 2rem;
		      border: none;
		      border-left: 1px solid #fff;
		      border-bottom: 1px solid #fff;
		      &:first-child {
		        border-left: 0;
		      }
		    }
		  }
		  tbody {
		    tr {
		      background-color: #fff;
		    }
		  }
		}

		ul {
			margin-left: 0;
			padding-left: 0;
			> li {
				display: table;
			  list-style: none;
			  position: relative;
			  padding-left: 27px;
			  padding-bottom: 10px;
			  margin: 0;
			  line-height: 1.3;
			  &:before {
			    content: "";
			    display: inline-block;
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 12px;
			    height: 3px;
			    margin: 0.5em 0;
			  }
				ul, ol {
					margin: 0;
	        padding-left: 0;
	        padding-top: 10px;
	        li {
	          &:last-child {
	            padding-bottom: 0;
	          }
	        }
	      }
			}
		}

		ol {
	    display: table;
	    padding: 0;
			margin-left: 0;
	    counter-reset: level1;
	    & > li {
	      counter-increment: level1;
	      position: relative;
	      margin: 6px 0 6px 1em;
	      padding-left: 10px;
	      &::marker {
	        content: counter(level1) ".";
	        //color: $green;
	        font-weight: bold;
	      }
	      ul, ol {
	        margin-left: 20px;
	      }
	      & > ol {
	        counter-reset: level2;
	        & > li {
	          counter-increment: level2;
	          &::marker {
	            content: counter(level1) "." counter(level2) ".";
	          }
	          & > ol {
	            counter-reset: level3;
	            & > li {
	              counter-increment: level3;
	              &::marker {
	                content: counter(level1) "." counter(level2) "." counter(level3) ".";
	              }
	              & > ol {
	                counter-reset: level4;
	                & > li {
	                  counter-increment: level4;
	                  &::marker {
	                    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ".";
	                  }
	                }
	              }
	            }
	          }
	        }
	      }
	    }
	  }

		a.colorbox,
		.media--type-document a {
			pointer-events: none;
		}

		.ck-widget {
			&.drupal-entity {
				//clear: left;
			}
			&.table {
				margin-left: 0;
			}
			&[data-display] {
				clear: left;
				.embedded-entity,
				figure {
		      width: 100%;
					float: none;
		      box-sizing: border-box;
		    }
			}
	    &[data-display*="full_width"] {
	      width: 100%;
	    }
	    &[data-display*="half_width"] {
	      width: 50%;
	    }
	    &[data-display*="onethird_width"] {
	      width: 33.33%;
	    }
	    &[data-display*="quarter_width"] {
	      width: 25%;
	    }
	    &[data-align="left"],
			&.align-left {
	      float: left;
	      clear: none;
	    }
	    &[data-align="right"],
			&.align-right {
	      float: right;
	      clear: none;
	    }
	    &[data-align="center"],
			&.align-center {
	      display: table;
	      margin: auto;
	      float: none;
	    }
	  }
	}
}