@import "ember-uikit/variables-theme";
// you can use the uikit SCSS variables here

$ember-power-select-default-border-radius: 0;
$ember-power-select-border-color: $global-border;

@import "ember-power-select";
@import "ember-basic-dropdown";

/* GENERAL INPUTS */
[class*="uk-width-"] {
  transition: width 0.3s ease-out;
}

.text-line-through {
  text-decoration: line-through;

  &:hover {
    text-decoration: line-through;
  }
}

// fixes the negative margin overlap of uk-grid
.uk-grid-divider-fix {
  margin-left: 0;

  .uk-first-column {
    padding-left: 0;
  }
}

div.uk-grid-divider-fix.uk-grid-stack > .uk-grid-margin::before {
  left: 0;
}
// end fix

.no-style-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.icon-in-button {
  margin-right: 0.3rem;
}

.pointer {
  cursor: pointer;
}

.hidden-input {
  height: 0;
  width: 100%;
  border: none;
  display: block;
  font-size: 0;
}

.search-input-form {
  button.search-reset-icon {
    border-left: none;
    right: 0;
    left: unset;
  }

  input.uk-search-input {
    padding: 0 40px;
  }

  input:focus ~ button.uk-search-icon {
    border-color: $global-primary-background;
    border-right-color: transparent;
  }

  input:focus ~ button.search-reset-icon {
    border-color: $global-primary-background;
    border-left-color: transparent;
  }
}

.uk-table td.small-padding-right {
  padding-right: 1.75em;
}

.sortable-th {
  cursor: pointer;

  :hover {
    text-decoration: underline;
  }
}

/* END GENERAL INPUTS */

/* TREE VIEW */
@media screen and (width >= 640px) {
  .tree-border-right {
    border-right: solid 1px $global-border;
  }
}

$tree_node_height: 1.9em;
$tree_indicator_width: 0.6em;
$tree_indicator_height: calc($tree_node_height/2);
$tree_node_icon_margin: calc($tree_indicator_height/2);

.tree-wrapper {
  display: flex;
  flex-direction: column;
  padding-right: $tree_node_icon_margin;
  height: 100%;
  max-height: 65vh;

  .tree {
    overflow-y: auto;

    a {
      line-height: $tree_node_height;
    }
  }
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree .active {
  font-weight: bold;
}

ul.tree ul {
  margin-left: $tree_indicator_width;
}

ul.tree li {
  margin-left: calc($tree_indicator_width/2);
  border-left: thin solid $global-border;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li::before {
  width: $tree_indicator_width - 0.15em;
  height: $tree_indicator_height;
  margin-right: 0.15em;
  vertical-align: top;
  border-bottom: thin solid $global-border;
  content: "";
  display: inline-block;
}

ul.tree li.childless::before {
  width: calc($tree_indicator_width * 3 - 0.5em);
  height: $tree_indicator_height;
  vertical-align: top;
  border-bottom: thin solid $global-border;
  content: "";
  display: inline-block;
}

ul.tree li:last-child::before {
  border-left: thin solid $global-border;
}

ul.tree li button.tree-node-icon {
  margin: 0 -0.25em 0.25em;
}

/* END TREE VIEW */