<commit_before>@import 'variables';
@import 'base';
@import 'utilities';
@import 'layout';

// Components
@import 'components/main-header';
@import 'components/main-footer';
@import 'components/index';
@import 'components/sidenav';
@import 'components/docs';
@import 'components/code-sample';

// Power Select
@import 'ember-power-select/themes/bootstrap';
@import 'ember-power-select';
@import 'ember-power-calendar';
@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);
  }
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below .15s;
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below .15s reverse;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-above .15s;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-above .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); }
}
.demo--with-animated-loading {
  &.ember-power-calendar--loading {
    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 {
    color: white;
    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 {
    color: white;
    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,.172549) 0 6px 12px 0;
}

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

.with-invisible-select {
  position: relative;
  select {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;<commit_msg>Fix styles in a demo<commit_after>@import 'variables';
@import 'base';
@import 'utilities';
@import 'layout';

// Components
@import 'components/main-header';
@import 'components/main-footer';
@import 'components/index';
@import 'components/sidenav';
@import 'components/docs';
@import 'components/code-sample';

// Power Select
@import 'ember-power-select/themes/bootstrap';
@import 'ember-power-select';
@import 'ember-power-calendar';
@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);
  }
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below .15s;
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below .15s reverse;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-above .15s;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-above .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); }
}
.demo--with-animated-loading {
  &.ember-power-calendar--loading {
    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,.172549) 0 6px 12px 0;
}

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

.with-invisible-select {
  position: relative;
  select {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
{'fraction_non_alphanumeric': 0.17883612407356575, 'fraction_numerical': 0.09305517430688992, 'mean_word_length': 3.8130779392338177, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 12}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '340815', 'n_tokens_mistral': 3303, 'n_tokens_neox': 2877, 'n_words': 446}