@import 'variables';

.bookmark-icon {
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  margin: -6px 0 -8px 4px;
  padding: 4px;
  vertical-align: top;
  width: 32px;

  &.bookmark-large {
    height: 40px;
    margin: 8px 0 0 4px;
    width: 40px;

    .icon {
      height: 32px;
      -webkit-mask-size: 32px;
      mask-size: 32px;
      width: 32px;
    }
  }


  &:hover,
  &:focus {
    background-color: $gray-lighter;
  }

   .icon {
    margin: 0;

     &.icon-bookmark {
      &,
      &:hover,
      &:focus {
        background-color: $gray-light !important;
      }
    }

     &.icon-bookmark-filled {
      &,
      &:hover,
      &:focus {
        background-color: gold !important;
      }
    }
  }
}
