/**
 * Styling for the SVG Sources.
 */


/* Icon markup */
.icon-markup {
   margin: 0 0 20px;
}

.icon-markup .label-row {
   margin: 20px 0 5px;
   overflow: hidden;
}

.icon-markup .copy-btn {
   float: right;
}

.icon-markup label {
   float: left;
   padding: 6px 0;
}

.icon-markup input,
.icon-markup textarea {
   font-family: monospace;
   width: 100%;
}

.icon-markup textarea {
   height: 120px;
   resize: vertical;
   vertical-align: middle;
}


/* Source lists */
.source-container {
   border-top: 1px solid #eee;
   margin-bottom: 20px;
   padding-top: 20px;
}

.source-container h4 {
   margin: 0 0 10px;
}

.source-container .source-dir {
   color: #888;
}

.source-container .source-filename {
   color: #000;
}

.icons-container {
   list-style: none;
   overflow: hidden;
   padding: 0;
}

.icons-container li {
   float: left;
   margin-bottom: 2%;
   margin-right: 2%;
   width: 49%;
}

.icons-container li:nth-child(even) {
   margin-right: 0;
}

.icons-container button {
   display: block;
   padding: 8px;
   text-align: left;
   width: 100%;
   border: none;
}

.icons-container .lp-icon {
   fill: #aaa;
   height: 15px;
   margin-right: 5px;
   -webkit-transition: fill 0.2s ease-in-out;
   transition: fill 0.2s ease-in-out;
   vertical-align: text-bottom;
   width: 15px;
}

.icons-container button:hover .lp-icon {
   fill: #333;
}

.icons-container span {
   display: inline-block;
   font-size: 14px;
}