// toastr
@import '~ngx-toastr/toastr';

// tagify
@import '@yaireo/tagify/dist/tagify.css';

// register skin
@import './scss/skin';

// register soul
.___dashboard {
  @import './scss/soul/core';
  @import './scss/soul/content/typography';
  @import './scss/soul/forms/label';
  @import './scss/soul/forms/control';
  @import './scss/soul/forms/select';
  @import './scss/soul/forms/checkbox';
  @import './scss/soul/forms/radio';
  @import './scss/soul/components/icon';
  @import './scss/soul/components/button';
  @import './scss/soul/components/menu';
  @import './scss/soul/components/dropmenu';
  @import './scss/soul/components/card';
  @import './scss/soul/components/table';
}

/*
 * icons
 */

$icons: (
  // misc
  dashboard-left: ('material', 'chevron-left'),
  dashboard-right: ('material', 'chevron-right'),
  dashboard-mola: ('direct', 'https://nguix-dashboard.lamnhan.com/assets/icons/mola.svg'),
  dashboard-menu: ('bootstrap', 'list'),
  dashboard-home: ('bootstrap', 'house-fill'),
  dashboard-comment: ('material', 'comment'),
  dashboard-record: ('material', 'code-braces'),
  dashboard-array: ('material', 'code-brackets'),
  // media
  dashboard-media-image: ('material', 'file-image'),
  dashboard-media-audio: ('material', 'file-music'),
  dashboard-media-video: ('material', 'file-video'),
  dashboard-media-document: ('material', 'file-document'),
  dashboard-media-archive: ('material', 'zip-box'),
  dashboard-media-unknown: ('material', 'file-question'),
  // media
  dashboard-media-library: ('material', 'folder'),
  dashboard-media-upload: ('material', 'upload'),
  dashboard-media-editor: ('material', 'image-edit'),
  // layout
  dashboard-layout-list: ('material', 'format-list-bulleted-square'),
  dashboard-layout-thumbnail: ('material', 'image-area'),
  // parts
  dashboard-part-front: ('material', 'gauge'),
  dashboard-part-media: ('material', 'image'),
  dashboard-part-user: ('material', 'account'),
  dashboard-part-category: ('material', 'shape'),
  dashboard-part-tag: ('material', 'tag-multiple'),
  dashboard-part-page: ('material', 'view-carousel'),
  dashboard-part-post: ('material', 'text-box'),
  dashboard-part-option: ('material', 'cog'),
  dashboard-part-profile: ('material', 'account-edit'),
  dashboard-part-audio: ('material', 'music'),
  dashboard-part-video: ('material', 'video'),
  dashboard-part-bundle: ('material', 'animation'),
);

@include register_icons($icons);


/*
 * styles
 */

.___dashboard {

  kbd {
    padding: 0.1rem 0.25rem;
    font-size: 0.875em;
    color: $medium;
    border: 1px solid $medium;
    border-radius: 0.2rem;
    background: none;
  }

  &.page {
    margin: auto;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 46px);
    background: $light-shade;
    padding: 1rem;
  }

  .ngx-pagination {
    padding: 0;
    margin: 0;

    li {
      padding: 0;
      font-size: .95rem;
      margin-right: .5rem;

      a {
        padding: 0 .375rem;
      }
    }

    li.current {
      font-size: .8rem;
      padding: 0 .375rem;
      background: none;
      border: 1px solid $primary;
      color: $primary;
    }
  }

  .tagify {
    border-color: $medium;
    background: $light;
  }

  @media screen and (min-width: 992px) {

    &.page {
      padding-left: 216px;
    }
  }

}