.ui-pog {
  position: relative;

  color: ui-color(paper-ink-medium);

  cursor: pointer;

  appearance: none;

  &__icon-wrapper {
    width: 50px;
    height: 50px;

    .ui-pog__icon {
      width: 100%;
      height: 100%;

      path {
        transition: fill $ui-duration-medium ease;

        fill: ui-color(paper-ink-dark);
      }
    }

    &::after {
      @include ui-icon--checkmark;
      position: absolute;
      top: -3px;
      right: -3px;

      display: inline-block;
      width: 13px;
      height: 13px;

      color: ui-color(orange-darkest);
      line-height: 13px;

      border-radius: 100%;
      opacity: 0;

      transition: opacity $ui-duration-medium ease;
    }
  }

  // Default Pog Hover Styles
  &--selected,
  &:hover,
  &:focus {
    color: ui-color(paper-ink-darkest);

    outline: none;

    .ui-pog__icon-wrapper {
      border-color: ui-color(orange-darkest);
    }
  }

  &--selected {
    & .ui-pog__icon-wrapper {
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);

      &::after {
        opacity: 1;
      }
    }
  }
}