<div id="ten"></div>

// #divtober 20: Ten
// a.singlediv.com/divtober2022

black(alpha)
  rgba(0,0,0,alpha)

white(alpha)
  rgba(255,255,255,alpha)

body
  min-height: 350px
  height: 100vh
  position: relative
  background-color: #222

div
  position: absolute
  left: 50%
  top: 50%

  &::before,
  &::after
    display: block
    content: ''
    position: absolute
    
  @media (max-width: 400px)
    &:not(.no-scale)
      transform: scale(.8)

#ten
  box-sizing: border-box
  width: 250px
  height: @width
  margin-left: -(@width/2)
  margin-top: -(@height/2)
  background-repeat: no-repeat
  border-radius: 1em
  border: .15em solid white
  box-shadow: inset 0 0 0 .2em tomato,
              inset 0 0 1em .3em tomato,
              inset 1em 1em .4em black(.6),
              0 0 0 .2em tomato,
              0 0 1em .3em tomato,
              1em 1em .4em black(.6)

  &::before
    width: .15em
    height: 8em
    left: 28%
    top: 50%
    margin-top: -(@height/2)
    background-color: white
    border-radius: 1em
    box-shadow: 0 0 0 .2em tomato,
                0 0 1em .3em tomato,
                1em 1em .4em .2em black(.6)

  &::after
    box-sizing: border-box
    width: 4em
    height: 8.2em
    left: 48%
    top: 50%
    margin-top: -(@height/2 + .1em)
    border-radius: 2em
    border: .15em solid white
    box-shadow: inset 0 0 0 .2em tomato,
                inset 0 0 1em .3em tomato,
                inset 1em 1em .4em black(.6),
                0 0 0 .2em tomato,
                0 0 1em .3em tomato,
                1em 1em .4em black(.6)

// @lynnandtonic
// a.singlediv.com