@import "../Checkbox.scss";

.monday-style-story-checkbox {
  &__directions-wrapper {
    display: flex;
    justify-content: center;
    margin: 10px;
  }

  &__state-wrapper {
    .monday-style-story-checkbox__state {
      position: relative;

      &:after {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }

      &--hover .monday-style-checkbox__checkbox {
        @include hover-unselected;
      }

      &--selected-hover .monday-style-checkbox__input:checked + .monday-style-checkbox__checkbox {
        @include hover-selected;
      }

    }
  }

  &__sandbox-wrapper {
    margin: 15px;
    width: 70%;
  }
}