@import "functions";
@import "variables";

/*Thypograpgy*/
body {
    font-family: sans-serif;
    padding: 1em;
}

/*General classes*/
label {
    display: inline-block;
}

.error {
    color: $danger;
}

.unselectable {
    user-select: none;
}

.section {
    margin-bottom: 1em;
}

/*Buttons*/
[class$="Btn"] {
    display: none;
}

input[class$="Btn"]:disabled + label, 
button:disabled {
    cursor: default;
    opacity: 0.5;
}

[class$="Btn"]:checked + label, 
button:active  {
    background: black;
    color: white;
}

[class$="Btn"]:checked + label.openClose  {
    background: white;
    color: black;
}

[class$="Btn"]:checked + label.selectFolder  {
    background: $success;
}

[class$="Btn"]:checked + label.excludeFolder  {
    background: $danger;
}

.openTxt:before, 
.closeTxt:before {
    content: "";
    display: inline-block;
    border: solid 0.5em transparent;
    border-left-color: black;
    vertical-align: middle;
}

.closeTxt:before {
    transform: rotate(45deg);
    transform-origin: bottom center;
    margin: 0 0.5em 0 -0.5em;
}

/*Close buttons*/
.closeBtn + label {
    margin-right: 1.5em;
}

.closeBtn:not(:checked) ~ label .openTxt {
    display: none;
}

.closeBtn:checked ~ label .closeTxt {
    display: none;
}

.closeBtn:checked + label ~ .tagsFormInner,
.closeBtn:checked + label ~ .featureFiles,
.closeBtn:checked + label ~ .featuresToRun {
    display: none;
}

/*Form*/
form {
    margin-bottom: 1em;
}

/*Browser section*/
.envWrapper {
    display: flex;
    align-items: center;
}

.envTitle {
    margin: 0 2em 0 0;
}

.envWrapper label {
    margin: 0;
}

/*Tags section*/
.row {
    display: flex;
    margin-bottom: 1em;
}

.tagListWrapper {
    display: block;
}

.tagList {
    padding-left: 0;
}

.tag {
    display: inline-block;
    margin-right: 1em;
    border-radius: 1em 0 0 1em;
    padding: 0.5em;
    border: solid 2px white;
    cursor: pointer;
    background: $orange;
}

.tag::before {
    vertical-align: middle;
    content: "";
    display: inline-block;
    width: 0.2em;
    height: 0.2em;
    border: solid 1px currentColor;
    border-radius: 50%;
    margin-right: 0.5em;
}

.featureList {
    padding-left: 1.5em;
}

.fullCol {
    padding: 0.5em;
}

.halfCol {
    width: calc(50% - 0.5em);
    padding: 0.5em;
}

.halfCol:first-child {
    margin-right: 0.5em;
}

.halfCol:last-child {
    margin-left: 0.5em;
}

.tagsIncluded {
    background-color: $success;
}

.tagsExcluded {
    background-color: $danger;
}

.row h2 {
    margin: 0;
}

.halfCol ul li {
    word-break: break-all;
}

/*Feature section*/
label[for="selectAll"] {
    margin-bottom: 1em;
}

.folderWrapper {
    margin: 0 0 1em 0;
    padding-left: 3em;
    border: none;
}

legend {
    font-weight: bold;
}

.featureFiles {
    margin-top: 1em;
    list-style-type: none;
}

.testRunningMsg {
    max-height: 20em;
    overflow-y: scroll;
    overflow-x: hidden;
    background: black;
    color: white;
    padding: 1em;
}

.testRunningMsg h2 {
    text-align: center;
    color: $success;
    font-size: 45px;
    font-weight: bold;
    font-family: impact;
}