@import "../variables/_all";
@import "./button";
@import "./loading";

.star-button {
  @extend .row-button;
  &.ap-button {
    &:hover {
      color: $dominant-color;
    }
    &:active {
      box-shadow: none;
      opacity: 0.66;
    }
    &.star-button-active {
      .star-button-icon {
        color: $dominant-color;
      }
    }
    &.star-button-spinning {
      pointer-events: none;
      opacity: 0.5;
      &:hover,
      &:active {
        color: inherit;
        opacity: 1;
      }
      .star-button-icon {
        color: inherit;
      }
    }
  }

  .star-button-icon {
    display: inline-block;
    margin-right: 4px;
  }
}

.stars-loading {
  @extend .loading;
}