@import '../../style_config/config';
@import './box_tables';
@import './box_photo';

#root,.ReactModalPortal {
    .JDbox {
        box-sizing: border-box;
        min-height: $standard-line-height;

        @include textAlign--prefixer();

        @include colorBg--prefixer();

        &--clickable {
            cursor: pointer;
            &:hover {
                background-color: $grey-level2;
            }
        }

        &--flex {
            .JDbox__content {
                display:flex;
                justify-content: space-between;
            }
        }
        &--flexVcenter {
            .JDbox__content {
                display:flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        

        &__label {
            font-size: $typho-tiny;
            margin-bottom: $standard-margin-bottom /3;
        }
        
        &--float {
            float:left;
            width: auto!important;
            vertical-align: top;
            margin: 2px!important;
        }

        &--normal {
            box-sizing: border-box;
            padding: $standard-small-space;
            background-color: $grey-level1;
            border-radius: $standard-border-radius;
            text-align: left;
            width: 100%;
            
            
            &__content {
                display: flex;
                justify-content: space-between;
            }
            
            .JDinput {
                margin-bottom: 0;
                padding: 0;
            }
        }
        
        &--small {
            font-size: $typho-small;
            padding: $standard-tiny-space;
            margin-bottom: $standard-margin-bottom /3;
        }

        &--center {
            text-align:center;
        }

        
        &--border {
            background-color: transparent!important;
            border-radius: $standard-border-radius;
            padding: $standard-small-space;
            border: 1px solid $grey-level1;

            &.JDbox {
                @include colorText--prefixer();
                @include colorBorder--prefixer();
            }
        }
        
        &--dashBorder {
            border-radius: $standard-border-radius;
            border: 2px dashed $grey-level1;
            box-sizing:border-box;
            padding: $standard-small-space;
            color: $grey-level1;

            background-color: rgba(255,255,255,0);
            
            &.JDbox--clickable {
                cursor: pointer;
                &:hover {
                    color: $grey-level2;
                    border-color: $grey-level2;
                    background-color: rgba(255,255,255,0);
                }
            }
        }
        
        &--standard {
            height: $standard-line-height;
            box-sizing: border-box;
            line-height: 100%;
        }

        
        &--withIcon {
            padding-right: 2rem;
            position: relative;

            .JDbox__icon {
                position:absolute;
                right: $standard-small-space;
                top:50%;
                transform: translateY(-50%);
            }
        }

        @include colorBg--prefixer();

        &--primary {
            .JDicon:hover {
                color: $grey-level2!important;
            }
        }
    }
}