@import "fonts.less";
.ts-button-sizing{
    padding-top:0;
    padding-bottom:0;
}
.ts-button-lineheight{
    line-height: @line-height * 0.875;
}
.ts-form-optional{
    display: none;
    &.ts-show-optional{
        display: initial;
    }
}
.ts-formelement{
}
.ts-formelement-border{
    border:@sizexs solid @secondaryTextColor;
}
.ts-formelement-border-light{
    border:1px solid lighten(@secondaryTextColor, 10%);
}
.ts-button{
    color:@primaryTextColor;
    background-color: @textPrimaryColor;
    border-color: darken(@textPrimaryColor, 5%);
    .ts-formelement-border;
    cursor:pointer;
    display: inline-block;
    padding-left: @sizemd;
    padding-right: @sizemd;
    .ts-button-lineheight;
    &input[type="button"],
    &input[type="submit"],
    &button[type="submit"],
    button{
        .ts-button-sizing;
        .ts-button-lineheight;
    }
    &:hover{
        background-color: darken(@textPrimaryColor, 10%);
    }
    &.ts-button-light-primary-color{
        color:@primaryTextColor;
        background-color: @lightPrimaryColor;
        border-color: lighten(@lightPrimaryColor, 5%);
        &:hover{
            background-color: lighten(@lightPrimaryColor, 10%);
        }
    }
    &.ts-button-secondary-text-color{
        color:@primaryTextColor;
        background-color: @secondaryTextColor;
        border-color: lighten(@secondaryTextColor, 5%);
        &:hover{
            background-color: lighten(@secondaryTextColor, 10%);
        }
    }
    &.ts-button-divider-text-color{
        color:@primaryTextColor;
        background-color: @dividerColor;
        border-color: lighten(@dividerColor, 5%);
        &:hover{
            background-color: lighten(@dividerColor, 10%);
        }
    }
    &.ts-button-accent-color{
        color:@textPrimaryColor;
        background-color: @accentColor;
        border-color: lighten(@accentColor, 5%);
        &:hover{
            background-color: lighten(@accentColor, 10%);
        }
    }
    &.ts-button-error-color{
        color:@textPrimaryColor;
        background-color: @errorColor;
        border-color: lighten(@errorColor, 5%);
        &:hover{
            background-color: lighten(@errorColor, 10%);
        }
    }
    &.ts-button-dark-primary-color{
        color:@textPrimaryColor;
        background-color: @darkPrimaryColor;
        border-color: lighten(@darkPrimaryColor, 5%);
        &:hover{
            background-color: lighten(@darkPrimaryColor, 10%);
        }
    }
    &.ts-button-primary-color{
        color:@textPrimaryColor;
        background-color: @primaryColor;
        border-color: lighten(@primaryColor, 5%);
        &:hover{
            background-color: lighten(@primaryColor, 10%);
        }
    }
    &.ts-button-primary-text-color{
        color:@textPrimaryColor;
        background-color: @primaryTextColor;
        border-color: lighten(@primaryTextColor, 5%);
        &:hover{
            background-color: lighten(@primaryTextColor, 10%);
        }
    }
}
input[type="button"].ts-button,
input[type="submit"].ts-button,
button[type="submit"].ts-button,
button{
    .ts-button-sizing;
    .ts-button-lineheight;
}
.ts-form{
    .ts-form-padding{
        // padding-left:@sizemd;
        // padding-right:@sizemd;
        // margin: @sizesm;
    }
    .ts-form-row{
        .ts-row;
        padding-top:@sizemd;
        padding-bottom:@sizemd;
        .ts-label{
            font-size: @percentxs;
        }
        .ts-input{
            width:100%;
            .ts-formelement-border-light;
            &[disabled="disabled"]{
                background-color: darken(@textPrimaryColor, 5%);
            }
        }
    }
}