@import '../vars';

// .safi-box-control-container {
// 	display: flex;
// 	margin-top: 10px;

// 	ul {
// 		margin: 0;
// 		display: flex;
// 		flex: 1;
// 		width: 100%;

// 		li {
// 			flex: 1;
// 			padding-right: 1px;

// 			input {
// 				width: 100%;
// 				margin: 0;
// 				padding: 0 6px;
// 				border-radius: 0;
// 			}
// 		}
// 	}

// 	.unit-type {
// 		font-size: 9px;
// 		text-transform: uppercase;
// 		width: 100%;
// 		text-align: center;
// 		display: inline-block;
// 		line-height: 1.25;
// 	}

// }



$input_border_radius: 4px;

.safi-box-control-container {
    display: flex;
    margin-bottom: 8px;

    &:hover {
        input.safi-box-control-input {
            background: $col-dark;
            border: 1px solid #80717b50;
        }
    }


    ul {
        display: flex;
        margin: 0;

        li {
            display: flex;
            flex-direction: column;
            margin-bottom: 0;

            &:first-of-type {
                input.safi-box-control-input {
                    border-radius: $input_border_radius 0 0 $input_border_radius;
                }
            }

            &:last-of-type {
                input.safi-box-control-input {
                    border-radius: 0 $input_border_radius $input_border_radius 0;
                }
            }
        }
    }

    @at-root .safi-box-control-icon {
        color: $col-faded-light;
        position: relative;
        height: 34px;
        width: 18px;
        margin: 0 0 0 5px;
        cursor: pointer;

        &::after {
            position: absolute;
            width: 18px;
            height: 24px;
            left: 0;
            top: 3px;
            font-size: 16px;
        }

        &.icon-clear {
            &::after {
                content: "\f335";
            }
        }

        &.icon-lock {
            &::after {
                content: "\f225";
            }

            &.--is-locked {
                &::after {
                    content: "\f103";
                    color: $col-accent;
                }
            }
        }
    }



    input.safi-box-control-input {
        position: relative;
        width: 43px;
        height: 26px;
        padding: 0;
        text-align: center;
        border-radius: 0;


        &::before {
            content: attr(data-dimension);
            position: absolute;
            top: 0;
            display: block;
            width: 40px;
            height: 16px;
        }
    }

    label.safi-box-control-label {
        display: block;
        text-align: center;
        text-transform: uppercase;
        font-size: 8px;
        font-weight: 200;
        margin-bottom: 0 !important;
        line-height: 1;
        // color: $col-accent;
    }


    // select.safi-box-control-units {
    //     border-radius: $input_border_radius;
    //     min-height: 12px;
    //     padding: 0px 6px 0 6px;
    //     background: $col-dark;
    //     border-color: #5e585c;
    //     line-height: 16px;
    //     height: 26px;
    //     color: white;
    // }
}

.safi-image-selector {
    border-radius: $input_border_radius;
    border: 1px dashed #343334;
    text-align: center;
    background: #5e5e5e;
    padding: 10px 8px;
    margin-bottom: 10px;

    &.--image-selected {
        padding: initial;
        border: none;
        background: initial;
    }

    & > p {
        margin-top: 0;
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 10px;
    }

    @at-root .safi-image-sources {

        >div {
            margin-bottom: 5px;
        }
    }

    @at-root .safi-image-name {
        display: flex;

        >p {
            margin-top: 0;
            // word-wrap: break-word; 
            word-break: break-all;
        }
    }

    img.safi-image-picker-thumb {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border: 1px solid white;
    }
}

#safi-img-url {
    margin-top: 10px;
}