@import "~terriajs-variables";

.search-result {
  span {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

.search-result.light .btn {
  // border-bottom: 1px solid rgba($grey, 0.4);
  background: transparent;
  &:hover {
    // border-bottom: 1px solid $color-primary;
    color: $color-primary;
  }
  svg {
    fill: #000;
  }
}

.search-result.dark .btn {
  color: #fff;
  border: 0;
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
  margin-bottom: 0;
  svg {
    fill-opacity: 0.5;
  }
  &:hover {
    svg {
      fill: #fff;
    }
  }
}

.icon {
  position: absolute;
  top: 5px;
  bottom: 0;
  // TODO: better icon management
  left: -3px;
  height: 21px;
  width: 17px;
  margin: 7px 0;
}

.resultName {
  padding-left: 20px;
}

.arrow-icon {
  position: absolute;
  top: 5px;
  bottom: 0;
  right: 1px;
  height: 10px;
  width: 10px;
  width: 14px;
  margin: 8px;
  // margin: $padding;

  svg {
    fill-opacity: 0;
  }
}

.btn {
  composes: btn from "../../Sass/common/_buttons.scss";
  &.btn {
    position: relative;
    padding: $padding;
    padding-left: 0;
    margin-bottom: $padding-mini;
    padding-right: $padding;
    width: 100%;
    border: 1px solid transparent;
  }
  &:hover {
    background-color: $grey-lighter;
    .arrow-icon svg {
      fill-opacity: 1;
    }
  }
  &.btnLocationName {
    padding: $padding $padding * 3;
  }
}
.btnWithBorderBottom {
  &.btnWithBorderBottom {
    @media (min-width: $sm) {
      border-bottom: 1px solid $grey;
    }
  }
}