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

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

    border-color: el-theme(datepicker-border-color);
    border-style: el-theme(datepicker-border-style);
    border-width: el-theme(datepicker-border-width);
    border-radius: el-theme(datepicker-border-radius);
    background: el-theme(datepicker-background-color);
    box-shadow: el-theme(datepicker-shadow);

    .primitive-overlay {
      color: el-theme(datepicker-text-color);
    }

    el-card {
      box-shadow: none;
    }

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


      &::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 el-theme(datepicker-background-color);
      }
    }

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

    &.el-overlay-bottom-start .arrow {
      top: calc(-1 * #{$arrow-size} + 1px);
      @include el-ltr(right, $arrow-size);
      @include el-rtl(left, $arrow-size);
    }

    &.el-overlay-bottom-end .arrow {
      top: calc(-1 * #{$arrow-size} + 1px);
      @include el-ltr(left, $arrow-size);
      @include el-rtl(right, $arrow-size);
    }

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

    &.el-overlay-start-top .arrow {
      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      bottom: $arrow-size;
      transform: rotate(90deg);
    }

    &.el-overlay-start-bottom .arrow {
      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: $arrow-size;
      transform: rotate(90deg);
    }

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

    &.el-overlay-top-start .arrow {
      bottom: calc(-1 * #{$arrow-size} + 1px);
      @include el-ltr(right, $arrow-size);
      @include el-rtl(left, $arrow-size);
      transform: rotate(180deg);
    }

    &.el-overlay-top-end .arrow {
      bottom: calc(-1 * #{$arrow-size} + 1px);
      @include el-ltr(left, $arrow-size);
      @include el-rtl(right, $arrow-size);
      transform: rotate(180deg);
    }

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

    &.el-overlay-end-top .arrow {
      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      bottom: $arrow-size;
      transform: rotate(270deg);
    }

    &.el-overlay-end-bottom .arrow {
      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: $arrow-size;
      transform: rotate(270deg);
    }
  }
}
