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

// Components
@import "components/main-header";
@import "components/link-to-other-version";
@import "components/main-footer";
@import "components/index";
@import "components/side-nav";
@import "components/docs";
@import "components/cookbook";

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

// Legacy demo
@import "ember-power-select";

// Utility classes
.evenly-splitted {
  > * {
    margin-bottom: 1rem;
  }
  @media only screen and (min-width: $small-breakpoint) {
    display: flex;
    > * {
      padding: 0 5px;
      flex: 1;
    }
  }
}
.max-500-height {
  max-height: 500px;
  overflow-y: scroll;
}
.text-pink {
  color: pink;
}
// App styles
.icon-flag {
  display: inline-block;
  height: 14px;
  width: 20px;
  .ember-power-select-multiple-option & {
    vertical-align: -10%;
  }
}
.icon-flag,
.country-detailed-info .country-flag {
  background-repeat: no-repeat;
  background-size: cover;
  &.US {
    background-image: url("/flags/us.svg");
  }
  &.ES {
    background-image: url("/flags/es.svg");
  }
  &.PT {
    background-image: url("/flags/pt.svg");
  }
  &.RU {
    background-image: url("/flags/ru.svg");
  }
  &.LV {
    background-image: url("/flags/lv.svg");
  }
  &.BR {
    background-image: url("/flags/br.svg");
  }
  &.GB {
    background-image: url("/flags/gb.svg");
  }
}
.country-detailed-info {
  margin: 0 -8px;
  display: flex;
  .country-flag {
    width: 92px;
    height: 69px;
  }
  .country-data-text {
    padding: 6px;
  }
}

.legacy-demo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.horizontally-centered {
  margin: 0 auto;
  display: block;
}
.text-center {
  text-align: center;
}

@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);
  }
}

.slide-fade {
  will-change: transform, opacity;
  &.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;
  }
}

// Bootstrap theme demo
.bootstrap-theme-trigger {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #ffffff;
  line-height: 2;
  text-overflow: ellipsis;
  min-height: 2em;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
  padding: 0 16px 0 8px;

  &[aria-disabled="true"] {
    background-color: #eeeeee;
  }

  &.ember-power-select-trigger--focus-inside,
  &:focus {
    border: 1px solid #66afe9;
    box-shadow:
      inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0;
  }

  &.ember-basic-dropdown-trigger--below[aria-expanded="true"],
  &.ember-basic-dropdown-trigger--in-place[aria-expanded="true"] {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &.ember-basic-dropdown-trigger--above[aria-expanded="true"] {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .ember-power-select-placeholder {
    color: #999999;
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ember-power-select-status-icon {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-width: 7px 4px 0 4px;
    border-color: #999 transparent transparent transparent;
  }
  &[aria-expanded="true"] .ember-power-select-status-icon {
    transform: rotate(180deg);
  }

  .ember-power-select-trigger-multiple-input {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    border: none;
    width: 25px;
    display: inline-block;
    line-height: inherit;
    -webkit-appearance: none;
    outline: none;
    padding: 0;
    float: left;
    background-color: transparent;
  }
  .ember-power-select-trigger-multiple-input:disabled {
    background-color: #eeeeee;
  }

  .ember-power-select-multiple-option {
    border: 1px solid gray;
    border-radius: 4px;
    color: #333333;
    background-color: #e4e4e4;
    padding: 0 4px;
    display: inline-block;
    line-height: 1.45;
    float: left;
    margin: 2px 3px 2px 0;
  }

  .ember-power-select-multiple-remove-btn {
    cursor: pointer;
  }
  .ember-power-select-multiple-remove-btn:not(:hover) {
    opacity: 0.5;
  }

  .ember-power-select-status-icon {
    right: 5px;
  }

  .ember-power-select-clear-btn {
    right: 25px;
  }
}

.bootstrap-theme-dropdown {
  &.ember-power-select-dropdown {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 2;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
    overflow: hidden;
    color: inherit;
  }
  &.ember-power-select-dropdown.ember-basic-dropdown-content--above {
    transform: translateY(-3px);
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  &.ember-power-select-dropdown.ember-basic-dropdown-content--below,
  &.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
    transform: translateY(3px);
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .ember-power-select-search-input {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    padding: 0 5px;
  }
  .ember-power-select-search-input:focus {
    border: 1px solid #66afe9;
    box-shadow:
      inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0;
  }

  .ember-power-select-options {
    list-style: none;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .ember-power-select-options[role="listbox"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 14em;
  }

  .ember-power-select-option {
    cursor: pointer;
    padding: 0 8px;
  }

  .ember-power-select-option[aria-disabled="true"] {
    color: #999999;
    pointer-events: none;
  }

  .ember-power-select-option[aria-selected="true"] {
    background-color: #f5f5f5;
  }

  .ember-power-select-option[aria-current="true"] {
    background-color: #f5f5f5;
    color: inherit;
  }

  .ember-power-select-group-name {
    cursor: default;
    font-weight: bold;
  }
  .ember-power-select-group
    .ember-power-select-group
    .ember-power-select-group-name {
    padding-left: 24px;
  }

  .ember-power-select-group
    .ember-power-select-group
    .ember-power-select-option {
    padding-left: 40px;
  }

  .ember-power-select-group .ember-power-select-option {
    padding-left: 24px;
  }

  .ember-power-select-group .ember-power-select-group-name {
    padding-left: 8px;
  }
}
// End of bootstrap styles

// Material theme demo
$material-demo-line-height: 2.5;
.material-theme-trigger {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  line-height: $material-demo-line-height;
  min-height: $material-demo-line-height;
  &:focus,
  &.ember-power-select-trigger--active {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgb(16, 108, 200);
    outline: none;
  }
  .ember-power-select-search-input {
    border: none;
    border-radius: 0;
    &:focus {
      border: none;
      outline: none;
    }
  }
  .ember-power-select-placeholder {
    transition:
      transform 0.2s,
      color 0.2s;
    transform-origin: 0 0;
  }
  &.ember-power-select-trigger--active .ember-power-select-placeholder {
    transform: scale(0.7) translateY(-10px);
    color: rgb(16, 108, 200);
  }
  .ember-power-select-multiple-option {
    border: none;
    border-radius: 15px;
    padding: 0 10px;
    line-height: 2;
  }
}
.material-theme-dropdown {
  border-radius: 0;
  line-height: $material-demo-line-height;
  box-shadow:
    0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
  .ember-power-select-options[role="listbox"] {
    max-height: #{$ember-power-select-number-of-visible-options *
      $material-demo-line-height}em;
  }
  .ember-power-select-search-input {
    border: none;
    border-radius: 0;
    &:focus {
      border: none;
      outline: none;
    }
  }
  .ember-power-select-option[aria-selected="true"] {
    background-color: #e1e1e1;
  }
  .ember-power-select-option[aria-current="true"] {
    background-color: #eee;
    color: inherit;
  }
  // Animation
  will-change: transform, opacity;
  &.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;
  }
}
// End of Material styles
