@import 'common/vars';

.camera {
    min-height: 90%;
    margin-top: 4%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .camera-container {
        position: relative;
        background: black;
        margin-bottom: 1em;

        .frame, .no-frame {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .frame {
            z-index: 1;
        }

        .no-frame {
            display: flex;
            background: rgba(0, 0, 0, 0.1);
            color: white;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
    }

    .url {
        width: 640px;
        display: flex;
        margin: 1em;

        .row {
            width: 100%;
            display: flex;
            align-items: center;
        }

        .name {
            width: 140px;
        }

        input {
            width: 500px;
            font-weight: normal;
        }
    }

    .params {
        margin-top: 1em;
        padding: 1em;
        width: 640px;
        display: flex;
        flex-direction: column;
        border: $default-border-3;
        border-radius: 1em;

        label {
            font-weight: normal;
        }

        .head {
            display: flex;
            justify-content: center;

            label {
                width: 100%;
                display: flex;
                justify-content: right;

                .name {
                    margin-right: 1em;
                }
            }
        }

        .body {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 -1em;

            .row {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 0.5em;

                .name {
                    width: 30%;
                }

                input {
                    width: 70%;
                }

                &:nth-child(even) {
                    background: $default-bg-6;
                }

                &:hover {
                    background: $hover-bg;
                }
            }
        }
    }
}