.property {
    flex: 1;
    display: flex;
    align-items: center;
    border-left: solid 3px transparent;
    min-height: 40px;
    padding-left: .6rem;
}

.property.active {
    border-left: solid 3px var(--primary-color);
}

.property.readOnly {
    padding-right: 1rem;
}

.property:hover {
    border-left: solid 3px rgba(100,100,100,.3);
    background-color: rgba(200,200,200,.1);
    cursor: pointer;
}

.property>i {
    min-width: 2rem;
    min-height: 2rem;
    background-size: cover;
    display: flex;
    justify-content: center;
    background-size: contain;
}

.property>label {
    flex: 1;
    color: rgba(0,0,0,.8);
    white-space: nowrap;
    text-transform: capitalize;
    padding-left: .6rem;
}

.property-value {
    cursor: pointer;
}

.property-toggler {
    width: 3.4rem;
    height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.property-toggler>.mdc-switch {
    padding-right: 1.4rem;
}

.property-selector {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    overflow-x: auto;
    margin: 0 0 0 1rem;
    padding: 0 0 0 1rem;
}

.property-selector>button {
    margin: 0 1px;
}

/** mdc **/
.property .mdc-text-field-helper-line {
    height: 0px;
}