@import 'variables';
:host {
  display: block;
  position: relative;
  width: 100%;
  z-index: 10;
}

.hr {
  height: 1px;
  background-color: $datepicker-header-body-divider-color;
  margin-left: -18px;
  margin-right: -18px;
}

.dp {
  position: absolute;
  border-radius: 3px;

  top: 1.1rem;
  width: 350px;
}

.dp-body {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.dp-body::after {
  content: '';
  position: absolute;
  top: -10px;
  transform: rotate(45deg);
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.1);
}

.left-0 {
  left: 0;

  .dp-body::after {
    left: 11px;
  }
}

.right-0 {
  right: 0;

  .dp-body::after {
    right: 11px;
  }
}
