// Core

@mixin action-bar($selectors, $item-selectors) {
    #{$selectors} {
        font-size: const(btn-font-size);

        #{$item-selectors} {
            android-elevation: 0;
            font-size: const(font-size);
            padding: 12 3;
            margin: 0;
            min-width: 0;
            width: auto;
            border-width: 0;
            text-transform: none;
            font-weight: normal;

            &:active {
                opacity: .7;
            }
        }

        & > Label {
            font-weight: bold;
            font-size: const(btn-font-size);
        }

        .ns-statusbar-transparent Page > & {
            padding-top: 24;
        }

        .ns-android__19.ns-statusbar-transparent Page > &,
        .ns-modal.ns-statusbar-transparent Page > & {
            padding-top: 0;
       }

        @if not $compat {
            .ns-android & Button,
            .ns-android & .nt-button {
                padding: 0 6;
            }
        } @else {
            .ns-android & .btn {
                padding: 0 6;
            }
        }

        > Label {
            width: 100%;
        }

        #{if($compat, '.action-bar-title', '> Label, > GridLayout Label')} {
            font-size: const(btn-font-size);
            vertical-align: center;
            text-align: center;
        }

        > GridLayout {
            padding: 0 4;
            width: 100%;

            > StackLayout {
                padding: 0;
                horizontal-align: left;
            }

            Button {
                padding: 12 10;
                horizontal-align: left;
            }

            [col="2"] {
                horizontal-align: right;
            }

            @at-root .ns-android & Button {
                padding: 12 16;
                margin: 0;
            }
        }
    }
}

// Skin

@mixin action-bar-skin($selectors, $item-selectors) {
    #{$selectors} {
        @include colorize(
            $color: ab-color,
            $background-color: ab-background
        );

        #{$item-selectors} {
            @include colorize(
                $color: ab-color
            );

            #{if($compat, '&-active:active', '&:active, &.-active')} {
                @include colorize(
                    $color: ab-color
                );
            }

            .ns-ios &,
            .ns-ios &:active {
                @include colorize($background-color: transparent);
            }
        }

        @if not $compat {
            .ns-android & Button,
            .ns-android & .nt-button {
                @include colorize(
                    $background-color: ab-background
                );
            }
        } @else {
            .ns-android & .btn {
                @include colorize(
                    $background-color: ab-background
                );
            }
        }
    }
}