.overlay-container
  position absolute
  right 5px
  bottom 5px

// Extend this class and add content
// to its before pseudo element to use
.overlay-button
  iconfont-styling()
  display inline-block
  width 40px
  height @width
  cursor pointer
  color white
  background-color dark-gray-text-color
  background-color rgba(0, 0, 0, 0.4)
  text-align center
  font-size 16px
  line-height @height
  border-radius (@width / 2)
  opacity 1
  transition opacity 0.125s
  &:hover
    background-color black
  &[data-state='saved']
    opacity 1
    background-color highlight-color
    &:hover
      background-color bad-red-color
      &:before
        content '\e621'
      &.is-clicked
        background-color highlight-color

.overlay-button-save
  @extends .overlay-button
  &:before
    content '\e622'

.artwork-item
  &:hover
    .overlay-button-save
      opacity 1
  .overlay-button-save
    opacity 0
    &[data-state='saved']
      opacity 1

.overlay-container
  position absolute
  right 5px
  bottom 5px

// Extend this class and add content
// to its before pseudo element to use
.overlay-button
  iconfont-styling()
  display inline-block
  width 40px
  height @width
  cursor pointer
  color white
  background-color dark-gray-text-color
  background-color rgba(0, 0, 0, 0.4)
  text-align center
  font-size 16px
  line-height @height
  border-radius (@width / 2)
  opacity 1
  transition opacity 0.125s
  &:hover
    background-color black
  &[data-state='saved']
    opacity 1
    background-color highlight-color
    &:hover
      background-color bad-red-color
      &:before
        content '\e621'
      &.is-clicked
        background-color highlight-color

.overlay-button-save
  @extends .overlay-button
  &:before
    content '\e622'

.artwork-item
  &:hover
    .overlay-button-save
      opacity 1
  .overlay-button-save
    opacity 0
    &[data-state='saved']:hover
      opacity 1

Save button on artwork_item should only appear on hover.
Save button on artwork_item should only appear on hover.
