.photographPage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: white; &__header { position: absolute; padding-top: em(60); padding-left: em(30); z-index: 10; } &__body { position: absolute; top: 0; left: 0; width: 100%; height: 100% } &__userImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } &__facemasker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: em(-120); img { width: 100%; } } &__facemaskerText { color: white; position: absolute; font-size: rem(20); font-weight: 700; line-height: 1.5; text-align: center; width: 100%; left: 0; bottom: em(50); } &__toolbar { position: absolute; left: 0; bottom: 0; width: 100%; height: em(205*0.7); } &__toolbar__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; padding-top: em(10); } .video__container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn__back { cursor: pointer; position: relative; width: em(150); } .btn__insert { cursor: pointer; position: relative; width: em(90*0.7); height: em(90*0.7); input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 10; } } .btn__camera { cursor: pointer; position: relative; width: em(184*0.7); height: em(184*0.7); visibility: hidden; pointer-events: none; &.is__show { visibility: visible; pointer-events: auto; } &.is__hidden { visibility: hidden; } } .btn__flip__camera { cursor: pointer; position: relative; width: em(90*0.7); height: em(90*0.7); visibility: hidden; pointer-events: none; &.is__show { visibility: visible; pointer-events: auto; } &.is__hidden { visibility: hidden; } } }