// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-global-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  body {
    font-family: Roboto, 'Helvetica Neue', sans-serif;
  }
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

  .ap-components {

    ::-webkit-scrollbar * {
        background:transparent;
    }
    ::-webkit-scrollbar {
      width: $scrollbar-width;
      height: $scrollbar-height;
    }
    ::-webkit-scrollbar * {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: #c5c5c5;
        min-height: 40px;
        border-radius: 40px;
    }
    [ap-item-list], [ap-item-detail] {
      ::-webkit-scrollbar {
        background: $item-background-inactive;
        width: ($scrollbar-width * 2) + $scrollbar-margin;
      }
      ::-webkit-scrollbar-thumb { border: $scrollbar-margin #fafafa solid; }
    }

    .background-dark {
      background: md-color($md-ap-dark, 500);
      color: md-contrast($md-ap-dark, 500);
      h6 {
        color: #8D99A5;
      }
    }

    .background-block {
      background: md-color($md-ap-light-grey, 500);
      color: md-contrast($md-ap-light-grey, 500);
    }

    h1, h2, h3, h4, h5 {
      font-family: "Hind";
      letter-spacing: 0.5px;
      font-weight: 400;
    }
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; font-weight: 500; }
    h6 { font-family: 'Open Sans'; font-size: 14px; font-weight: 400; letter-spacing: 0.3px; }

    a {
      text-decoration: none;
      color: $color-label-p;
      cursor: pointer;
      &:hover { text-decoration: underline; }
    }
    p {
      font-family: 'Open Sans';
      letter-spacing: 0.3px;
      font-weight: 400;
      font-size: 13px;
      line-height: 22px;
      letter-spacing: 0.5;
      color: $color-label-p;
      margin: 10px 0;
    }

    label {
      font-family: 'Open Sans';
      letter-spacing: 0.3px;
      font-weight: 400;
      font-size: 11px;
      color: $color-label-p;
      text-transform: uppercase;
    }
    span, p {
      &.label, &.error, &.success {
        font-family: 'Open Sans';
        letter-spacing: 0.3px;
        text-transform: initial;
        &:first-letter { text-transform: uppercase; }
      }
      &.placeholder {
        font-size: 14px;
        color: $color-placeholder;
      }
      &.label {
        font-size: 11px;
        font-weight: 400;
        color: $color-label-p;
        text-transform: uppercase;
      }
      &.error {
        font-size: 13px;
        font-weight: 500;
        color: $color-error;
      }
      &.success {
        font-size: 13px;
        font-weight: 500;
        &, md-icon {
          color: $color-success;
        }
      }
    }

    // NOTE
    // Here are pretty usefull selectors across all the app
    // We should put all the shared stuff in the ap-components here

    [full-w] {
      width: 100%;
      [ap-input] { width: 100%; }
    }

    [fullscreen] {
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    [hidden] { visibility: hidden; }

    [square], [rounded], [round] { overflow: hidden; }
    [rounded] { border-radius: 100%; }
    [round] { border-radius: 9999px; }
    [square], [square] img { border-radius: 4px; }
    [box], [box] img { border-radius: 0; }

    [bullet] {
      width: 10px;
      height: 10px;
      background-color: #000;
      display: inline-block;
      border-radius: 100%;
      &[color='published'] { background-color: $color-success; }
      &[color='scheduled'] { background-color: $color-scheduled; }
      &[color='queued'] { background-color: $color-queued; }
      &[color='toReview'] { background-color: $color-approve; }
      &[color='assigned'] { background-color: $color-assigned; }
    }

    [ellipsis] {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    [disabled] {
      pointer-events: none;
      cursor: default;
    }

    [noselect] {
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
         -khtml-user-select: none; /* Konqueror */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      not supported by any browser */
    }

    [hover] {
      cursor: pointer;
      position: relative;
      &:hover .hover-area { display: flex; }
      .hover-area {
        display: none;
        background: black;
        z-index: 999;
        opacity: 0.7;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        align-items: center;
        color: white;
        justify-content: center;
      }
    }

    [arrow] {
      &:after {
        content: '';
        display: block;
        position: absolute;
        left: 15px;
        top: -5px;
        width: 0;
        height: 0;
        z-index: 0;
        border: 11px solid black;
        border-color: transparent transparent #ffffff #ffffff;
        transform: rotate(135deg);
        /* box-shadow: $z-depth-3; */
        box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.05);
      }
      &.arrow-up:after {
        border-bottom: 10px solid white;
      	border-top: 10px solid transparent;
      	border-left: 10px solid transparent;
      	border-right: 10px solid transparent;
      }
      &.arrow-down:after {
        border-bottom: 10px solid transparent;
      	border-top: 10px solid white;
      	border-left: 10px solid transparent;
      	border-right: 10px solid transparent;
      }
    }

    [color-primary] { color: md-color($primary); }
    [color-accent] { color: md-color($accent); }

    [background-primary] { background: md-color($primary); }
    [background-accent] { background: md-color($accent); }

    [z-depth-1-strong] { box-shadow: $z-depth-1-strong }
    [z-depth-2-strong] { box-shadow: $z-depth-2-strong }
    [z-depth-3-strong] { box-shadow: $z-depth-3-strong }
    [z-depth-4-strong] { box-shadow: $z-depth-4-strong }
    [z-depth-5-strong] { box-shadow: $z-depth-5-strong }

    [z-depth-1] { box-shadow: $z-depth-1 }
    [z-depth-2] { box-shadow: $z-depth-2 }
    [z-depth-3] { box-shadow: $z-depth-3 }
    [z-depth-4] { box-shadow: $z-depth-4 }
    [z-depth-5] { box-shadow: $z-depth-5 }

    [z-depth-1-light] { box-shadow: $z-depth-1-light }
    [z-depth-2-light] { box-shadow: $z-depth-2-light }
    [z-depth-3-light] { box-shadow: $z-depth-3-light }
    [z-depth-4-light] { box-shadow: $z-depth-4-light }
    [z-depth-5-light] { box-shadow: $z-depth-5-light }

    [display-flex] {
      display: flex;
    }

    [h-separator] {
      display: flex;
      align-items: center;
      font-family: "Open Sans";
      letter-spacing: 0.3px;
      font-size: 15px;
      margin: 15px 0;
      color: $color-placeholder;
      hr {
        flex: 1;
        border: none;
        background: $color-label-p;
        height: 1px;
      }
      span { padding: 0 25px; text-align: center; }
    }

    [v-separator] {
      width: 2px;
      background: $color-border;
      margin: 0 25px;
    }
    .fill-remaining-space,
    [fill] {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
    }

  ////////////////////////////////////////////////////////////////////////////////
  ///////////////////////////// CUSTOM COMPONENTS ///////////////////////////////
  //////////////////////////////////////////////////////////////////////////////

  }

}