@import 'pmp-material-theme-variables';
@import 'pmp-material-theme-utils';
@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: md-palette($md-indigo);
$accent:  md-palette($md-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-red);

// Create the theme object (a Sass map containing all of the palettes).
$theme: md-dark-theme($primary, $accent, $warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

//paragraph link
p a, .link-style { color:$palette-accent; text-decoration:none;
    &:hover, &:focus, &:active { text-decoration:underline; }
}

// MAIN PAGR WRAPPER
md-sidenav-layout.main-wrapper { height:100vh;
    md-sidenav { width:$main-sidenav-width; }
    > .md-sidenav-content { overflow:hidden; }
}

// PAGE CONTAINER
.page-container { position:relative; height:$content-max-height-no-secondary-nav; overflow:hidden;
    .button-holder { position:absolute; right:0; bottom:0; z-index:1; }
    p { margin-bottom:0; }
    p + p { margin-top:4px; }
}

// SECONDARY NAV OVERRIDE
.secondary-navigation {
    /deep/ .md-tab-header { background-color:darken($palette-accent, 35%); }
    /deep/ md-tab-body { max-height:$content-max-height; }
    /deep/ .md-tab-label[md-tab-label-wrapper] { color:$palette-accent; opacity:1; font-size:16px; font-weight:normal; text-shadow:0px 0px 8px #000;
        &:hover, &:focus { background:none; }
    }
    md-ink-bar { background-color:$palette-accent }
}

// DASHBOARD TILE
app-console-output-tile,
app-engine-indicator-tile,
app-pimp-links-tile,
app-config-preview-tile {
    h3 { margin-top:16px; margin-bottom:8px; line-height:24px; }
    h3 + * { padding:16px; margin-top:0; margin-bottom:0; background-color:#000; border-radius:2px; }
    .btn-edit { border:none; background:none; padding:0; margin-left:16px; float:right; color:$base-text-color; cursor:pointer; outline:none; transition:color #{$base-transition};
        &:focus, &:active, &:hover { color:$palette-accent; }
    }
}

// BUTTON HOLDERS
.button-holder { padding:0 4px 16px 0; margin:0; width:64px; text-align:center;
    button + button { margin-top:16px; }
}

// PIMP FORMS STYLES
.pimp-form { padding-top:16px;
    .form-control-container { margin-top:16px; margin-bottom:16px; @include clearfix;
        md-input { display:block; margin-top:32px; }
        md-slide-toggle { margin-top:32px; }
    }
    .text-muted { opacity:.65; font-size:.79em; margin-top:4px; }

    // textarea styling (see pimp rule implementation)
    .textarea-container { position:relative; padding-top:22px;
        label { font-size:10.5px; color:rgba(255, 255, 255, .3); display:block; position:absolute; top:0; left:0; transition:color #{$base-transition}; }
        textarea:focus + label { color:$palette-accent; }
        textarea { outline:none; width:100%; max-width:100%; padding:8px; background-color:$dark-bg; color:$base-text-color; box-sizing:border-box; border:2px solid $dark-bg; transition:border-color #{$base-transition};
            &:focus { border-color:$palette-accent; }
        }
    }
}

// LINK LIST
.link-list, .item-list { list-style:none;
    a:not(.regular-link), button { display:block; text-align:left; font-size:1em; line-height:1.2; border:none; background-color:transparent; text-decoration:none; color:$base-text-color; transition:color #{$base-transition}; padding:8px 0; outline:none;
        &:hover, &:focus, &:active { color:$palette-accent; }
    }
    button { width:100%; cursor:pointer; }
    md-icon { float:left; font-size:46px; width:46px; height:46px; margin-right:16px; }
    h4 { margin-top:0; margin-bottom:0; overflow:hidden;
        md-icon { float:none; font-size:16px; width:16px; height:18px; margin-left:8px; vertical-align:bottom; }
    }
    p { margin-top:4px; margin-bottom:0; overflow:hidden; opacity:.75; white-space:nowrap; text-overflow:ellipsis; }
}
.item-list > li { padding:8px 0; }

// HELPER LIST
.helper-list { list-style:none; margin:0; padding:0;
    button { width:100%; cursor:pointer; padding:2px 8px; border:none; color:$base-text-color; background-color:transparent; text-align:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
        &:hover, &:focus, &:active { color:$palette-accent; }
    }
}

// DIALOG BOX
md-dialog-container.md-dialog-container { max-height:calc(100vh - 132px); max-width:calc(100vw - 132px); border:16px solid $dialog-bg; overflow-y:auto; 
    h1 { color:$palette-accent; }
    h2 { color:lighten( $palette-accent, 10% ); }
    h3 { color:lighten( $palette-accent, 20% ); }
}
app-plugin-readme { display:block; }

// MARKDONW-CONTAINER
.markdown-container { font-size:.8em; color:$base-text-color; }

// SNACKBAR
snack-bar-container { text-align:center;
    /deep/ .md-simple-snackbar-message { color:$palette-accent !important; font-weight:bold; }
}

// SMALL STUFF
.highlight { color:$palette-accent; }