@use "sass:color";

// Main

@import "variables";
@import "base";
@import "utilities";
@import "layout";

// Power Select

@import "ember-power-select";
@import "ember-power-select/themes/bootstrap";
@import "ember-power-calendar";

// Components

@import "components/main-header";
@import "components/main-footer";
@import "components/index";
@import "components/sidenav";
@import "components/docs";

// Docs
@import "docs/code-example";
@include ember-code-example($brand-color);

// Misc

@keyframes drop-fade-below {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(3px);
  }
}

@keyframes drop-fade-above {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.code-example-snippet {
  &.result {
    background-color: white;
  }

  .ember-power-calendar {
    margin: 0 auto;
  }
}

.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below 0.15s;
}

.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below 0.15s reverse;
}

.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-above 0.15s;
}

.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-above 0.15s reverse;
}

// Utility classes
.pink-text {
  color: #ff0789;
}

// Calendar styles
@media only screen and (min-width: $small-breakpoint) {
  .ember-power-calendar {
    @include ember-power-calendar($cell-size: 50px);
  }
}

@media only screen and (max-width: $small-breakpoint) {
  .ember-power-calendar {
    @include ember-power-calendar($cell-size: 42px);
  }
}

.demo-calendar-small {
  @include ember-power-calendar($cell-size: 30px);
}

.demo-calendar-medium {
  @include ember-power-calendar($cell-size: 50px);
}

.demo-calendar-big {
  @include ember-power-calendar($cell-size: 70px);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading-spiner-overlay {
  opacity: 0.5;

  &::before {
    content: "";
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%231F77BD%22%20stroke-width%3D%225%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M12.6%2077.6C7%2070%203.6%2060.3%203.6%2050%203.6%2024.3%2024.2%203.5%2050%203.5S96.5%2024.3%2096.5%2050c0%205.4-1%2010.5-2.6%2015.3%22/%3E%3C/svg%3E");
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
}

.demo-range-calendar-with-pretty-range-ends-yo {
  .ember-power-calendar-day--range-start,
  .ember-power-calendar-day--range-end {
    color: white;

    &:hover {
      color: white;
    }
  }

  .ember-power-calendar-day--range-start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,0 8,0 10,5 8,10 0,10' fill='%230078c9'/%3E%3C/svg%3E");
  }

  .ember-power-calendar-day--range-end {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,5 2,0 10,0 10,10 2,10' fill='%230078c9'/%3E%3C/svg%3E");
  }
}

.datepicker-demo-input {
  padding-left: 0.4rem;
  border: 1px solid #ccc;
  height: 2rem;
  border-radius: 4px;
}

.datepicker-demo-dropdown {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 17.3%) 0 6px 12px 0;
}

.i18n-select-demo {
  max-width: 400px;
  margin: 0 auto;
}

.with-invisible-select {
  position: relative;

  select {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
}

.multiple-month-power-calendar-horizontal {
  @include ember-power-calendar($cell-size: 46px);

  width: 100%;
  margin-left: auto;
  margin-right: auto;

  .ember-power-calendar-nav-title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;

    .month-name {
      flex-grow: 1;
      width: calc(50% - 0.5rem);

      &:first-child {
        margin-right: 1rem;
      }
    }
  }

  .months-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    .ember-power-calendar-days {
      width: calc(50% - 0.5rem);
    }
  }
}

.multiple-month-power-calendar-vertical {
  height: 500px;
  overflow-y: scroll;

  .months-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
}

.nav-with-power-select-demo {
  .ember-power-calendar-nav-title {
    display: flex;
    justify-content: center;
  }

  .ember-power-select-trigger {
    border: none;
    box-shadow: none;
    min-width: 70px;
  }
}

.nav-with-number-input-demo {
  input[type="number"] {
    border: none;
    margin-left: 5px;
    width: 50px;
    font-size: 100%;
    line-height: 1.6;
    font-family: "Open sans", sans-serif;
    color: $text-color;
  }
}

.single-day-range-demo {
  .ember-power-calendar-day--range-start.ember-power-calendar-day--range-end {
    color: red;
  }
}

.custom-day-demo-calendar {
  @include ember-power-calendar(
    $cell-size: 50px,
    $cell-with-spacing-width: 50px,
    $row-height: 50px
  );

  .ember-power-calendar-week {
    justify-content: left;
  }
}

.custom-class-demo-day {
  $border-left: inset 1px 0 0 blue;
  $border-right: inset -1px 0 0 blue;
  $border-top: inset 0 1px 0 blue;
  $border-bottom: inset 0 -1px 0 blue;

  transform: translateX(-1px) translateY(-1px);

  &.ember-power-calendar-day--focused {
    box-shadow: none;
  }

  &.is-horizontal-first-day {
    box-shadow: $border-left;
  }

  &.is-horizontal-last-day {
    box-shadow: $border-right;
  }

  &.is-vertical-first-day {
    box-shadow: $border-top;
  }

  &.is-vertical-last-day {
    box-shadow: $border-bottom;
  }

  &.is-horizontal-first-day.is-horizontal-last-day {
    box-shadow: $border-left, $border-right;
  }

  &.is-vertical-first-day.is-vertical-last-day {
    box-shadow: $border-top, $border-bottom;
  }

  &.is-horizontal-first-day.is-vertical-first-day {
    box-shadow: $border-left, $border-top;
  }

  &.is-horizontal-last-day.is-vertical-first-day {
    box-shadow: $border-right, $border-top;
  }

  &.is-horizontal-last-day.is-vertical-last-day {
    box-shadow: $border-right, $border-bottom;
  }

  &.is-horizontal-first-day.is-vertical-last-day {
    box-shadow: $border-left, $border-bottom;
  }

  &.is-horizontal-first-day.is-horizontal-last-day.is-vertical-first-day {
    box-shadow: $border-left, $border-right, $border-top;
  }

  &.is-horizontal-first-day.is-horizontal-last-day.is-vertical-last-day {
    box-shadow: $border-left, $border-right, $border-bottom;
  }

  &.is-vertical-first-day.is-vertical-last-day.is-horizontal-first-day {
    box-shadow: $border-top, $border-bottom, $border-left;
  }

  &.is-vertical-first-day.is-vertical-last-day.is-horizontal-last-day {
    box-shadow: $border-top, $border-bottom, $border-right;
  }

  &.is-horizontal-first-day.is-horizontal-last-day.is-vertical-first-day.is-vertical-last-day {
    box-shadow: $border-left, $border-right, $border-top, $border-bottom;
  }
}
