@import '../../style/themes/index';
@import '../../style/mixins/index';

@colorpicker-prefix-cls: ~'@{acud-prefix}-imgcrop';

.@{colorpicker-prefix-cls}-modal {
    .@{colorpicker-prefix-cls}-container {
        position: relative;
        width: 100%;
        height: 300px;
    }
    .@{colorpicker-prefix-cls}-control {
        display: flex;
        align-items: center;
        width: 60%;
        margin-right: auto;
        margin-left: auto;

        &:first-of-type {
            margin-top: 16px;
        }

        &:last-of-type {
            margin-bottom: -8px;
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: @img-crop-button-size;
            height: @img-crop-button-size;
            padding: 0;
            font-style: normal;
            background: transparent;
            border: 0;
            outline: 0;
            cursor: pointer;

            &[disabled] {
                cursor: default;
            }
        }

        button + div:only-of-type {
            flex: 1;
            margin: 0 8px;
        }
    }

    .@{colorpicker-prefix-cls}-control-zoom button {
        font-size: @img-crop-base-font-size + 2;
    }

    .@{colorpicker-prefix-cls}-control-rotate button {
        font-size: @img-crop-base-font-size;

        &:first-of-type {
            transform: rotate(-20deg);
        }

        &:last-of-type {
            transform: rotate(20deg);
        }
    }
}