@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;
  left: 1px;
  height: 21px;
  width: 18px;
  margin: 6px;
}

.resultName{
  padding-left: 20px;
}

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

  svg {
    fill-opacity: 0;
  }
}

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