/* Forms */

@mixin form($selectors) {
    #{$selectors} {
        padding: 16 0 10;

        .-center {
            horizontal-align: center;
        }

        .nt-form__or-separator {
            margin: 20 0;
        }

        .nt-form__logo {
            margin: 20 0;
            width: 50%;
        }

        .nt-form__validation-message {
            margin: 1 0 0;
            padding: 0;
            height: 19;
        }

        .nt-form__footer {
            padding: 0;
            horizontal-align: center;

            Button {
                width: 50%;
                margin: 5;
            }
        }
    }
}


@mixin form-fields($selectors: '') {

    /* Form Validation styling */

    #{if($compat, '.input',
        ($selectors,
         'TextView',
         'TextField',
         'PickerField',
         'DatePickerField',
         'TimePickerField',
         'RadAutoCompleteTextView'))} {

        &.ng-invalid.ng-dirty {
            border-color: const(error);
        }
    }

    /* Form fields */

    #{if($compat, '.input',
        ($selectors,
         'TextView',
         'TextField',
         'PickerField',
         'DatePickerField',
         'TimePickerField',
         'DateTimePickerFields',
         'DataFormEditorCore',
         'RadAutoCompleteTextView'))} {

        border-width: 0 0 const(border-width);
        border-radius: const(btn-radius);
        background-color: transparent;
        font-size: const(font-size);
        padding: 8 0 4;
        margin: 5 16;
    }

    #{if($compat,
        ('.input-rounded',
         '.input-border'),
        ('.-rounded-sm',
         '.-rounded-lg',
         '.-border'))} {
        border-width: const(border-width);
        padding: 12 14;
    }

    #{if($compat, '.input-border', '.-rounded-sm')} {
        border-radius: const(border-radius-sm);
    }

    #{if($compat, '.input-rounded', '.-rounded-lg')} {
        border-radius: const(border-radius-lg);
    }

    [isEnabled=false] {
        opacity: const(disabled-opacity);
    }

    TextView[editable=false] {
        border-width: 0;
    }

    Label,
    DataFormEditorLabel
    {
        padding: 2 0;
    }

    TextView {
        min-height: 100;
    }

    RadAutoCompleteTextView {
        &[displayMode=Tokens] {
            padding: 4 0 8;
        }

        Token {
            border-radius: const(border-radius-lg);

            @at-root .ns-android TokenClearButton {
                width: 18;
                height: 18;
                border-radius: const(border-radius-lg);
                opacity: .6;
            }

            @if $enable-rounded {
                border-radius: max(const(btn-radius) - 3, 0);
            }
        }
    }

    /* Date Picker */

    PickerField,
    DatePickerField,
    TimePickerField,
    DateTimePickerFields,
    DataFormEditorCore,
    RadAutoCompleteTextView {
        background-repeat: no-repeat;
        background-position: right center;

        .ns-ios & {
            background-size: 28 16;
        }
    }

    PropertyEditor[type='Date'] DataFormEditorCore,
    DatePickerField {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAAD1BMVEVHcEwAAAAAAAAAAAAAAADTrAj/AAAABHRSTlMAwBAgU5DCQwAAAFdJREFUSMdjYCAVuLi4oDHop5RJxAUDOCpgVcroggUIYFXKgk2pMw6lChhudXHAoZSBVkrRw26EKcUC6Kt0NAoGkVIWaFSNKh25Sgd7QURCZURCFUcLAAC2I2hEECBYPgAAAABJRU5ErkJggg==');
    }

    /* Time Picker */

    PropertyEditor[type='Time'] DataFormEditorCore,
    TimePickerField {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAALVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACttl6nAAAADnRSTlMAYOBAwCAQ0FCAcPCwoEZwdhsAAAE2SURBVEjHY2AYLIB1Td27d89PBRBWyQhUCALPBQiq1HsHBY8IqGX1e/fuyWRjY0sQjd8N3e/eKSaAGGxC797twGs9UCWMDVSLzwly794mwNhs9949xK2SA8UgoBUNOJVGo5oj924rTqV+EEP53sGMfYLbU28ZkJUy3MPpMaZ3aqhKk94p4PS/AKpSRpxhUPeIAVUpg95zHJEKMwOhVO4d9sjlevcMXWneuwVYlfK8c0BXyvLuAI4AmICulPNdAValfO8M0JVyvHtArFJmqiqFACopbSBWKTsssBAAV2DBowABcEUBPGIRAFfEsmImOVzJBZ4IEQBXIoQnbaQc9JBAhoED3BkGlg3hAHc2hGVuhNYn1CgySCiISCjeSCk0SSiKIQX8DGPjTsIFPAnVBimVESlV3IABAKDkz5jHIcToAAAAAElFTkSuQmCC');
    }


    /* Date/Time Picker */

    DateTimePickerFields {
        padding: 0;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAwBAMAAAB3UCypAAAALVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACttl6nAAAADnRSTlMAQGDgwBAg0FCAcPCwoM9Ie+kAAAGcSURBVEjH5Ze/TsMwEMZD2pQWVRUZu0VijxASa8UTVJXYUXYWniDqilhgY+QBmBEjMw9RtTQlU79nICRyrDjxxYkdqYhviYe7X87/7s6WlQqAMDCgPwF15igpWhAOg9cQiD8DCtpHha7k9naYmcQeAZ1UQb/lzBmz2XoUdFFaU2ykc08WK3py3envNyCgVgPoA3CRLrhzBrybgdoJk40TqkdCxRMmg/rY5wfDWeHLBHRYCC4Je2kAeluMzcebAeg8C5S52Ij0oTb2RZeVbKsaQHu4LLpc47zBjdpI9t4rQm3Z/jeAhltxcrNYFzpgcXGoj0BzTU+wE11u8KIJHbOMyF36+NCE9vAouowk268OneBUdBlibR56dPDQTAcMXbaBZtZrCfSYHSmuEe40oeNyO6By+Glofk25VK4pDR2UE51KQqGheerjkqc+ZagvVg8iSStDWTnJRZQTZSgrfLmUCl8NlJVo/hOVEl0HbdVM1EFbtT110E4atG5ayUZNrzI0bc+fXfe+rj2v0E7zIdHJk6eTx5nluCUF1j/RDxQQPw3i9N+zAAAAAElFTkSuQmCC');

        .ns-ios & {
            background-size: 56 16;
        }

        .input,
        DatePickerField,
        TimePickerField {
            background-image: none;
            border-width: 0;
            margin: 0;

            .ns-dark & {
                background-image: none;
                background-color: transparent;
            }
        }

        TimePickerField {
            margin-left: -30;
        }
    }

    /* Picker */

    PickerField {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAAGFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAABoAtTLAAAAB3RSTlMAoPAw0BAgCEJU4wAAAEpJREFUSMdjYBgFgwUwChCtVLyQaEPLy4k1Nqm8nFhjmdWJN9Zo1NghZiwJSol3wKihA2ooCZk7hPj0x+pOdEHEEEJ88TYKBgoAAAC5JRg49rIWAAAAAElFTkSuQmCC');
    }

    PickerPage {
        &.input {
            padding: 0;
            margin: 0;
        }

        ListView {
            separator-color: transparent;

            > * {
                height: 48;
                margin-top: 0;
                padding: 10 12;

                border-bottom-width: 1px;
            }
        }
    }

    .ns-dark {
        PickerField {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUdwTP///////////////////////////x1LVb4AAAAHdFJOUwCg8DDQECAIQlTjAAAASklEQVRIx2NgGAWDBTAKEK1UvJBoQ8vLiTU2qbycWGOZ1Yk31mjU2CFmLAlKiXfAqKEDaigJmTuE+PTH6k50QcQQQnzxNgoGCgAAALklGDj2shYAAAAASUVORK5CYII=');
        }

        DatePickerField {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURUdwTP///////////////xPgMRoAAAAEdFJOUwDAECBTkMJDAAAAV0lEQVRIx2NgIBW4uLigMeinlEnEBQM4KmBVyuiCBQhgVcqCTakzDqUKGG51ccChlIFWStHDboQpxQLoq3Q0CgaRUhZoVI0qHblKB3tBREJlREIVRwsAALYjaEQQIFg+AAAAAElFTkSuQmCC');
        }

        TimePickerField {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTP///////////////////////////////////////////////////////81e3QIAAAAOdFJOUwBg4EDAIBDQUHDwsKCA4isvJAAAATZJREFUSMdjYBgsgHV23bt3z3cGEFbJCFQIAs8FCKrUewcFjwioZfV79+7JZWNjWxCN3w1d794pJoAYbELv3q3Aaz1QJYwNVIvPCXLv3iTA2Gzn3j3ErZIDxSCgFQ04lUahmiP3bilOpX4QQ/newYx9gttTbxiQlTKcw+kxpndqqEqT3ing9L8AqlJGnGFQ94gBVSmD3nMckQozA6FU7h32yOV89wxdad67CViVcr9zQFfK8m4DjgC4gK6U910BVqV87wzQlXK8e0CsUmaqKoUAKiltIFYpOyywEABXYMGjAAFwRQE8YhEAV8SyYiY5XMkFnggRAFcihCdtpBz0kECGgQPcGQaWDeEAdzaEZW6E1ifUKDJIKIhIKN5IKTRJKIohBfwNY+NewgU8CdUGKZURKVXcgAEAq1LPmF1qDewAAAAASUVORK5CYII=');
        }

        DateTimePickerFields {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAwBAMAAAB3UCypAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTP///////////////////////////////////////////////////////81e3QIAAAAOdFJOUwBAYODAECDQUHDwsKCAaxMi1gAAAZxJREFUSMfll89Kw0AQxmPa1EppMQ9QCHgPIngtPkEpeJecPfkEoWdB8O5dPHr1JYrePLY2NZfyPYMxYbNkk51sshuo+F2yh5lfZv/NzFpWKgDCwID+BNSZo6RoQTgMnkIgfgsoaB8VupLb22FmEnsEdFIF/ZYzZ8xm61HQRWlNsZHOPVms6MN1p7/fgIBaDaD3wEW64M4Z8GIGaidMNk6oHgkVT5gM6mOfHwxnhS8T0GEhuCTspQHobTE2H88GoPMsUOZiI9KH2tgXXVayrWoA7eGy6HKN8wY3aiPZe68ItWX73wAabsXJzWJd6IDFxaE+As01PcFOdLnBoyZ0xDIid+njVRPaw7voMpZsvzp0glPRZYi1eejRwUMzHTB02QaaWa8l0GN2pLjGuNOEjsrtgMrhp6H5NeVSuaY0dFBOdCoJhYbmqY9LnvqUob5YPYgkrQxl5SQXUU6Uoazw5VIqfDVQVqL5T1RKdB20VTNRB23V9tRBO2nQumklGzW9ytC0Pf903Ye69rxCO82HRCdPnk4eZ5bjlhRY/0Q/Hn4/DfXSncYAAAAASUVORK5CYII=');
        }

        PickerField,
        DatePickerField,
        TimePickerField,
        DateTimePickerFields,
        RadAutoCompleteTextView {
            // Here be dragons! >:)
            class: ns-dark;
        }
    }

    RadDataForm PropertyEditor {
        padding: 5 0 0;
    }

    @if $enable-rounded {
        #{$selectors},
        TextView,
        TextField,
        PickerField,
        DatePickerField,
        TimePickerField,
        DateTimePickerFields,
        DataFormEditorCore,
        RadAutoCompleteTextView {
            border-width: const(border-width);
            padding: 12 14;
        }

        RadAutoCompleteTextView[displayMode=Tokens] {
            padding: 12 14;
        }

        DateTimePickerFields {
            DatePickerField,
            TimePickerField {
                padding: 0;
            }
        }
    }
}


@mixin input-component($selectors) {
    FlexboxLayout#{$selectors},
    GridLayout#{$selectors},
    StackLayout#{$selectors} {
        border-width: 0;
        border-radius: 0;
        padding: 0;
    }

    #{$selectors} {
        @at-root DataFormEditorLabel,
        #{if($compat, '& .label', '& > .nt-label, & > Label')} {
            font-size: const(font-size);
            color: const(grey-light);
        }

        @at-root DataFormEditorLabel,
        #{if($compat,
            ('& .label',
             '& .input'),
            ('& > .nt-label',
             '& > .nt-input',
             '& > Label',
             '& > TextView',
             '& > TextField',
             '& > PickerField',
             '& > DatePickerField',
             '& > TimePickerField',
             '& > DateTimePickerFields',
             '& > RadAutoCompleteTextView'))} {
            margin: 0;
        }

        #{if($compat, '&.input-sides', '&.-sides')} {
            margin-bottom: 10;

            @if $enable-rounded {
                #{if($compat, '& > .label', '& > .nt-label, & > Label')} {
                    margin-top: 11;
                }
            }
        }

        @if not $compat {
            & > .nt-icon {
                font-size: const(icon-font-size-lg);
                vertical-align: center;
                horizontal-align: right;
                margin: -15 10 0 0;
            }
        }
    }
}

@mixin form-skin($selectors) {
    #{$selectors} {
        .nt-form__title {
            font-size: const(btn-font-size);
        }

        .nt-form__link {
            @include colorize($color: accent);
        }

        .nt-form__validation-message {
            color: const(error);
        }

        // Set isEnabled="false" on the whole form
        &[isEnabled=false] * {
            opacity: const(disabled-opacity);
        }
    }
}

@mixin form-fields-skin($selectors: '') {

    /* Form fields */

    #{if($compat, '.input',
        ($selectors,
         'TextView',
         'TextField',
         'PickerField',
         'DatePickerField',
         'TimePickerField',
         'DateTimePickerFields',
         'DataFormEditorCore',
         'RadAutoCompleteTextView'))} {
        background-color: transparent;

        @include colorize(
            $color: primary,
            $placeholder-color: secondary,
            $contrasted-border-color: gray background 10%
        );

        &:focus {
            @if $theme-variant == "kendo-default" {
                @include colorize($alternate-border-color: gray 20%);
            } @else {
                @include colorize($contrasted-border-color: accent background 20%);
            }
        }

        &[isEnabled=false] {
            @include colorize(
                $color: gray,
                $background-color: background-alt-5
            );
        }
    }

    PropertyEditor:focus DataFormEditorCore {
        @include colorize($contrasted-border-color: accent background 20%);
    }

    RadAutoCompleteTextView {
        Token {
            @include colorize($contrasted-background-color: accent background -20%);

            &:selected {
                @include colorize($contrasted-background-color: accent background -10%);
            }
        }

        ClearButton {
            @include colorize($color: accent);
        }

        SuggestionView {
            @include colorize(
                $color: primary,
                $background-color: background
            );
        }
    }

    RadDataForm {
        @include colorize(
            $color: primary,
            $placeholder-color: secondary
        );

        PropertyEditor {
            @include colorize(
                $color: primary,
                $background-color: background
            );
        }
    }

    /* NativeScript UI AutoComplete */

    PickerPage {
        ListView {
            @include colorize(
                $color: primary,
                $background: background
            );

            > * {
                @include colorize($border-bottom-color: primary-accent);
            }
        }
    }

    PickerPage.ns-dark ListView,
    .ns-dark SuggestionView {
        color: dark(primary);
        background: dark(background);
    }

    /* DateTime Picker */

    .date-time-picker {
        color: light(primary);
        background: light(background);

        &.ns-dark {
            color: dark(primary);
            background: dark(background);
        }
    }

    .date-time-picker-buttons {
        color: contrasted(light(accent), light(background), 40%);

        &.ns-dark {
            color: contrasted(dark(accent), dark(background), 40%);
        }
    }

    // Special iOS dark styling for the Cancel button.
    .ns-dark.date-time-picker-button-cancel {
        background: dark(background);
    }

    .date-time-picker-spinners {
        color: contrasted(light(accent), light(background), 30%);

        &.ns-dark {
            color: contrasted(dark(accent), dark(background), 30%);
        }
    }
}


@mixin input-component-skin($selectors) {
    #{$selectors} {
        @at-root DataFormEditorLabel,
        #{if($compat, '& .label', '& > .nt-label, & > Label')} {
            @include colorize($contrasted-color: accent background 30%);
        }
    }
}