/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */

@import "style/_colors.scss";

@mixin optional() {
    // height: 1.25rem;
    // margin-left: 0.5rem;
    // margin-top: 0.5rem;
    flex: 0 1 auto;
}
.nsVirtualLinksContainer {
    flex: 1 0 100%;
}
.nsVirtualLinks {
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;

    .nsVirtualLinksListWrapper {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        margin-right: 0.5rem;
        min-width: 50%;
        max-width: 50%;
        
        .nsVirtualLinksTableWrapper {
            padding: 1rem;

            .nsVirtualLinksTable {
                background: white;
                border-collapse: collapse;
                border: 1px solid black;
                text-transform: capitalize;
                width: 100%;

                tr {
                    cursor: pointer;
                    a {
                        cursor: pointer;
                        margin-left: 0.5rem;
                        font-weight: normal;
                        color: $black;
                    }
                    &.selectedVirtualLink {
                        background: $gray-darkest !important;
                        color: $white !important;
                        a {
                            color: $white;
                        }
                    }
                }
                th {
                    text-align: left;
                    padding: 0.5rem;
                    background: $gray-dark;
                    border: 1px solid black;
                }
                tr:nth-child(odd) {
                    background: $gray-lighter;
                    td {
                        border: 1px solid black;
                        padding: 0.5rem;
                    }
                }
                tr:nth-child(even) {
                    background: $white;
                    td {
                        border: 1px solid black;
                        padding: 0.5rem;
                    }
                }
            }
        }
    }

    .nsVirtualLinkDetailsWrapper {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        min-width: 50%;
        max-width: 50%;

        .nsVirtualLinkDetails {
            padding: 1rem;
            display: flex;
            flex-direction: row;

            h3 {
                display: flex;
                text-decoration: underline;
                margin-bottom: 1rem;
            }

            .column {
                flex: 1 1 100%;
                .title {
                    opacity: 0.5;
                }
                .value {
                    display: flex;
                    margin-bottom: 0.5rem;
                    .readonly {
                        background: none !important;
                    }
                }
            }
        }

        .createVirtualLink {
            padding: 1rem;
            display: flex;
            flex-direction: column;

            label {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin-bottom: 1rem;
                align-items: flex-start;
                justify-content: flex-start;
                span {
                    margin-bottom: 0.5rem;
                }
                select {
                    font-size: 1rem;
                    min-width: 75%;
                }
            }

            h3 {
                display: flex;
                text-decoration: underline;
                margin-bottom: 1rem;
            }

            .readonly {
                background: none !important;
            }

            .inputControls-radioGroup {
                display: flex;
                .inputControls-radio {
                    display: flex;
                    flex-direction: row;
                    width: inherit;
                    margin-right: 1rem;
                }
            }

            .vnfd-connection-points-list {
                .vnfd-connection-points-list-item {
                    padding: 1rem;
                    background: $gray;

                    &:nth-child(odd) {
                        background: $gray-dark;
                    }

                    &:last-child {
                        margin-bottom: 1rem;
                    }

                    input {
                        min-width: 75%;
                    }
                }
            }
        }
    }
}