/*
 * Copyright (C) 2018 Université de Montréal
 * Author Gilles-Philippe Leblanc
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * Less file allowing to create an organigram based on existing html.
 *
 * @author Gilles-Philippe Leblanc
 */
.org-container {
    --udem-organigramme-border-color: #999;
    --udem-organigramme-border-width-normal: 1px;
    --udem-organigramme-border-width-large: 2px;
    --udem-organigramme-item-padding-size: 10px;
    --udem-organigramme-relationship-padding-size-normal: 20px;
    --udem-organigramme-relationship-padding-size-large: 30px;

    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    .org-item {
        position: relative;
        border-color: var(--udem-organigramme-border-color);
        border-width: var(--udem-organigramme-border-width-normal);
        border-style: solid;
        max-width: 200px;
        padding: var(--udem-organigramme-item-padding-size);
        margin: var(--udem-organigramme-relationship-padding-size-normal) auto;
        z-index: 1;
        background: #fff;

        [data-padding-size="large"]& {
            margin: var(--udem-organigramme-relationship-padding-size-large) auto;
        }

        [data-draggable="true"]& {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
        }
    }

    &[data-draggable="true"] .mask {
        position: absolute;
        z-index: 1;
        background: red;
        opacity: 0.6;
    }

    .org-relationship {
        position: absolute;
        z-index: 0;
        &, &::before, &::after {
            border-color: var(--udem-organigramme-border-color);
            border-style: solid;
            border-width: 0;
        }

        &.dashed {
            &, &::before, &::after {
                border-style: dashed;
            }
        }

        &.line {
            &.leftward,
            &.rightward {
                border-bottom-width: var(--udem-organigramme-border-width-normal);
            }
            &.downward,
            &.upward {
                border-right-width: var(--udem-organigramme-border-width-normal);
            }
        }

        &.oblique {

            &.trbl-v,
            &.bltr-v,
            &.tlbr-v,
            &.brtl-v {
                &::before, &::after {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 50%;
                }
                &::before {
                    border-bottom-width: var(--udem-organigramme-border-width-normal);
                    height: calc(50% + var(--udem-organigramme-border-width-normal) / 2 );
                }
                &::after {
                    height: calc(50%  - var(--udem-organigramme-border-width-normal) / 2 );
                }
            }

            &.trbl-v-s,
            &.bltr-v-s,
            &.tlbr-v-s,
            &.brtl-v-s {
                &::before, &::after {
                    content: "";
                    display: block;
                    width: 100%;
                }
                &::before {
                    border-bottom-width: var(--udem-organigramme-border-width-normal);
                    height: calc(100%  - var(--udem-organigramme-relationship-padding-size-normal) + var(--udem-organigramme-border-width-normal) / 2 );
                }
                &::after {
                    height: var(--udem-organigramme-relationship-padding-size-normal) + var(--udem-organigramme-border-width-normal) / 2;
                }

                [data-padding-size="large"]& {
                    &::before {
                        border-bottom-width: var(--udem-organigramme-border-width-normal);
                        height: calc(100%  - var(--udem-organigramme-relationship-padding-size-large) + var(--udem-organigramme-border-width-normal) / 2 );
                    }
                    &::after {
                        height: var(--udem-organigramme-relationship-padding-size-large) + var(--udem-organigramme-border-width-normal) / 2;
                    }
                }
            }

            &.trbl-v,
            &.bltr-v,
            &.trbl-v-s,
            &.bltr-v-s {
                &::before {
                    border-right-width: var(--udem-organigramme-border-width-normal);
                }
                &::after {
                    border-left-width: var(--udem-organigramme-border-width-normal);
                }
            }
            &.tlbr-v,
            &.brtl-v,
            &.tlbr-v-s,
            &.brtl-v-s {
                &::before {
                    border-left-width: var(--udem-organigramme-border-width-normal);
                }
                &::after {
                    border-right-width: var(--udem-organigramme-border-width-normal);
                }
            }

            &.bltr-h,
            &.trbl-h,
            &.tlbr-h,
            &.brtl-h {
                &::before, &::after {
                    content: "";
                    display: block;
                    float: left;
                    width: 50%;
                    height: 100%;
                }
                &::before {
                    border-right-width: var(--udem-organigramme-border-width-normal);
                    width: calc(50% + var(--udem-organigramme-border-width-normal) / 2 );
                }
                &::after {
                    width: calc(50%  - var(--udem-organigramme-border-width-normal) / 2 );
                }
            }

            &.bltr-h,
            &.trbl-h {
                &::before {
                    border-bottom-width: var(--udem-organigramme-border-width-normal);
                }
                &::after {
                    border-top-width: var(--udem-organigramme-border-width-normal);
                }
            }
            &.tlbr-h,
            &.brtl-h {
                &::before {
                    border-top-width: var(--udem-organigramme-border-width-normal);
                }
                &::after {
                    border-bottom-width: var(--udem-organigramme-border-width-normal);
                }
            }
        }

        &.corner {
            &.tl-corner,
            &.lt-corner {
                border-bottom-width: var(--udem-organigramme-border-width-normal);
                border-right-width: var(--udem-organigramme-border-width-normal);
            }
            &.lb-corner,
            &.bl-corner {
                border-right-width: var(--udem-organigramme-border-width-normal);
                border-top-width: var(--udem-organigramme-border-width-normal);
            }
            &.rb-corner,
            &.br-corner {
                border-left-width: var(--udem-organigramme-border-width-normal);
                border-top-width: var(--udem-organigramme-border-width-normal);
            }
            &.rt-corner,
            &.tr-corner {
                border-bottom-width: var(--udem-organigramme-border-width-normal);
                border-left-width: var(--udem-organigramme-border-width-normal);
            }
        }
    }

    [data-line-size="large"]& {
        .org-item {
            border-width:var(--udem-organigramme-border-width-large);
        }

        .org-relationship {
            &.line {
                &.leftward,
                &.rightward {
                    border-bottom-width:var(--udem-organigramme-border-width-large);
                }
                &.downward,
                &.upward {
                    border-right-width:var(--udem-organigramme-border-width-large);
                }
            }

            &.oblique {

                &.trbl-v,
                &.bltr-v,
                &.tlbr-v,
                &.brtl-v {
                    &::before {
                        border-bottom-width:var(--udem-organigramme-border-width-large);
                        height: calc(50% + var(--udem-organigramme-border-width-large) / 2 );
                    }
                    &::after {
                        height: calc(50%  - var(--udem-organigramme-border-width-large) / 2 );
                    }
                }

                &.trbl-v-s,
                &.bltr-v-s,
                &.tlbr-v-s,
                &.brtl-v-s {
                    &::before {
                        border-bottom-width:var(--udem-organigramme-border-width-large);
                        height: calc(100%  - var(--udem-organigramme-relationship-padding-size-normal) + var(--udem-organigramme-border-width-large) / 2 );
                    }
                    &::after {
                        height: var(--udem-organigramme-relationship-padding-size-normal) + var(--udem-organigramme-border-width-large) / 2;
                    }

                    [data-padding-size="large"]& {
                        &::before {
                            border-bottom-width: var(--udem-organigramme-border-width-normal);
                            height: calc(100%  - var(--udem-organigramme-relationship-padding-size-large) + var(--udem-organigramme-border-width-large) / 2 );
                        }
                        &::after {
                            height: var(--udem-organigramme-relationship-padding-size-large) + var(--udem-organigramme-border-width-large) / 2;
                        }
                    }
                }

                &.trbl-v,
                &.bltr-v,
                &.trbl-v-s,
                &.bltr-v-s {
                    &::before {
                        border-right-width:var(--udem-organigramme-border-width-large);
                    }
                    &::after {
                        border-left-width:var(--udem-organigramme-border-width-large);
                    }
                }
                &.tlbr-v,
                &.brtl-v,
                &.tlbr-v-s,
                &.brtl-v-s {
                    &::before {
                        border-left-width:var(--udem-organigramme-border-width-large);
                    }
                    &::after {
                        border-right-width:var(--udem-organigramme-border-width-large);
                    }
                }

                &.bltr-h,
                &.trbl-h,
                &.tlbr-h,
                &.brtl-h {
                    &::before {
                        border-right-width:var(--udem-organigramme-border-width-large);
                        width: calc(50% + var(--udem-organigramme-border-width-large) / 2 );
                    }
                    &::after {
                        width: calc(50%  - var(--udem-organigramme-border-width-large) / 2 );
                    }
                }

                &.bltr-h,
                &.trbl-h {
                    &::before {
                        border-bottom-width:var(--udem-organigramme-border-width-large);
                    }
                    &::after {
                        border-top-width:var(--udem-organigramme-border-width-large);
                    }
                }
                &.tlbr-h,
                &.brtl-h {
                    &::before {
                        border-top-width:var(--udem-organigramme-border-width-large);
                    }
                    &::after {
                        border-bottom-width:var(--udem-organigramme-border-width-large);
                    }
                }
            }

            &.corner {
                &.tl-corner,
                &.lt-corner {
                    border-bottom-width:var(--udem-organigramme-border-width-large);
                    border-right-width:var(--udem-organigramme-border-width-large);
                }
                &.lb-corner,
                &.bl-corner {
                    border-right-width:var(--udem-organigramme-border-width-large);
                    border-top-width:var(--udem-organigramme-border-width-large);
                }
                &.rb-corner,
                &.br-corner {
                    border-left-width:var(--udem-organigramme-border-width-large);
                    border-top-width:var(--udem-organigramme-border-width-large);
                }
                &.rt-corner,
                &.tr-corner {
                    border-bottom-width:var(--udem-organigramme-border-width-large);
                    border-left-width:var(--udem-organigramme-border-width-large);
                }
            }
        }
    }
}