/*!
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin nb-datepicker-theme {
  nb-datepicker-container {
    $arrow-size: nb-theme(datepicker-arrow-size);
    $arrow-content-size: calc(#{$arrow-size} - 2px);

    border: 2px solid nb-theme(datepicker-border);
    border-radius: nb-theme(datepicker-border-radius);
    background: nb-theme(datepicker-bg);
    box-shadow: nb-theme(datepicker-shadow);

    .primitive-overlay {
      color: nb-theme(datepicker-fg);
    }

    .arrow {
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: $arrow-size solid nb-theme(datepicker-border);


      &::after {
        position: absolute;
        content: ' ';
        width: 0;
        height: 0;
        top: 3px;
        left: calc(50% - #{$arrow-content-size});
        border-left: $arrow-content-size solid transparent;
        border-right: $arrow-content-size solid transparent;
        border-bottom: $arrow-content-size solid nb-theme(datepicker-bg);
      }
    }

    &.nb-overlay-bottom .arrow {
      top: calc(-#{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
    }

    &.nb-overlay-left .arrow {
      right: round(-$arrow-size - $arrow-size / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(90deg);
    }

    &.nb-overlay-top .arrow {
      bottom: calc(-#{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
      transform: rotate(180deg);
    }

    &.nb-overlay-right .arrow {
      left: round(-$arrow-size - $arrow-size / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(270deg);
    }
  }
}