@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        background-color grey-10
        margin   0 1em 1em 0

        a
          vertical-align middle

    .pho-photo-item
        height       em(240px)
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index  2
        opacity  0
        height   2em
        width    2em
        padding  1em
        cursor   pointer

        &[data-input=checkbox] label::before
            box-shadow 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 1.5em rgba(255,255,255,.8)


        &[data-input=checkbox] input[type=checkbox]:checked + label::after
            background-size     1.5em
            background-position center center

        &[data-input=checkbox] input[type=checkbox]:checked + label::before
            box-shadow 0 0 0 3px dodger-blue, inset 0 0 0 1.5em dodger-blue

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width  100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1

@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        background-color grey-10
        margin   0 1em 1em 0

        a
          vertical-align middle

    .pho-photo-item
        height       em(240px)
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index  2
        opacity  0
        height   2em
        width    2em
        padding  1em
        cursor   pointer

        &[data-input=checkbox] label::before
            box-shadow 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 1.5em rgba(255,255,255,.8)


        &[data-input=checkbox] input[type=checkbox]:checked + label::after
            background-size     1.5em
            background-position center center

        &[data-input=checkbox] input[type=checkbox]:checked + label::before
            background-color dodger-blue
            box-shadow       0 0 0 3px dodger-blue, inset 0 0 0 1.5em dodger-blue

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width  100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1

Add background color on checked checbox to avoid white offset easily spotted with a microscope :microscope:
[fix] Add background color on checked checbox to avoid white offset easily spotted with a microscope :microscope:
