// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

@metrics-width: 480px;
@metrics-height: 220px;
@spacing-x: 90px;
@spacing-y: 50px;

.admin__field-design-options {
    > input[type='text'] {
        display: none;
    }

    .layout-onion {
        display: inline-block;
        height: @metrics-height;
        vertical-align: top;
        width: @metrics-width;

        input[type='text'] {
            text-align: center;
            width: 8rem;
        }

        .layout-onion-layer {
            height: @metrics-height;
            position: relative;
            width: @metrics-width;

            span.label {
                font-size: .9em;
                left: 8px;
                position: absolute;
                text-align: left;
                top: 4px;
            }

            .layout-onion-top {
                left: 50%;
                position: absolute;
                top: 9px;
                transform: translateX(-50%);
            }
            .layout-onion-right {
                position: absolute;
                right: 5px;
                top: 50%;
                transform: translateY(-50%);
            }
            .layout-onion-bottom {
                bottom: 9px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%);
            }
            .layout-onion-left {
                left: 5px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }

            &.layout-margin {
                background: @color-white-fog;

                > .layout-onion-bottom,
                > .layout-onion-top {
                    margin-left: 2px;
                }
            }
            &.layout-border {
                background: darken(@color-white-fog, 5%);
                border: 1px solid darken(@color-gray89, 5%);
                bottom: @spacing-y;
                box-sizing: border-box;
                height: (@metrics-height - (@spacing-y * 2));
                left: @spacing-x;
                position: absolute;
                right: @spacing-x;
                top: @spacing-y;
                width: (@metrics-width - (@spacing-x* 2));

                > .layout-onion-right,
                > .layout-onion-left {
                    margin-top: -1px;
                }
                > .layout-onion-bottom,
                > .layout-onion-top {
                    margin-left: 1px;
                }
            }
            &.layout-padding {
                background: darken(@color-white-fog, 10%);
                border: 1px solid darken(@color-gray89, 10%);
                bottom: @spacing-y;
                box-sizing: border-box;
                height: (@metrics-height - (@spacing-y * 4));
                left: @spacing-x;
                position: absolute;
                right: @spacing-x;
                top: @spacing-y;
                width: (@metrics-width - (@spacing-x* 4));

                > .layout-onion-right,
                > .layout-onion-left {
                    margin-top: -2px;
                }
            }
        }
    }

    .layout-settings {
        display: inline-block;
        padding-left: 3rem;
        vertical-align: top;

        .layout-field {
            margin-bottom: 1rem;
        }

        .admin__field-label {
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.4rem;
            font-weight: 600;
            line-height: 3.2rem;
            padding: 0;
            white-space: nowrap;
            word-wrap: break-word;
        }

        .border-radius-slider {
            .border-radius-input {
                display: inline-block;
                margin-left: 12px;

                input {
                    text-align: center;
                    width: 50px;
                }
            }
            .border-radius-slider-slider {
                display: inline-block;
                width: 180px;
            }
        }
    }
}