@import '~terriajs-variables';
@import '../../Sass/common/mixins';

.root {
  composes: clearfix from '../../Sass/common/_base.scss';
  display: block;
  width: 100%;
  position: relative;
}

.btn-catalog-item {
  font-size: $font-size-small;
  composes: btn from '../../Sass/common/_buttons.scss';
  @extend %wrap;
  position: relative;
  width: 100%;
  padding: $padding-small $padding*2.5 $padding-small $padding*1.5;

  &:focus, &:hover {
    color: $modal-highlight;
    &:before {
      opacity: 1;
    }
  }

  &--is-previewed {
    color: $modal-highlight;
    font-weight: $font-weight-bold;
    &:before {
      opacity: 1;
    }
  }

  @media (max-width: $sm) {
    font-size: $font-size-mid-small;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid $grey-lighter;
  }
}

.btn-action {
  composes: btn from '../../Sass/common/_buttons.scss';

  position: absolute;
  color: $color-primary;
  right: 0;
  top: 0;

  @media (max-width: $sm) {
    top: 5px;
  }

  svg{
    height: 18px;
    width: 18px;
    margin: 6px;
    fill: $charcoal-grey;
  }

  &:hover, &:focus{
    svg{
      fill: $modal-highlight;
    }
  }

  &--stats-bars {
  }

  &--add-to-map {
  }

  &--remove-from-map {
  }

  &--loading-on-map {
    top: 3px;
    right: 12px;
    &:before{
      position: absolute;
    }
  }
}