
.o_hr_attendance_kiosk_mode, .o_hr_attendance_clock {
    @include media-breakpoint-down(md) {
        width: 100%;
    }
}

.o_hr_attendance_clock {
    position: relative;
    display: none;

    @include media-breakpoint-up(md) {
        @include o-position-absolute(0, 0); // Fine-tuned by margin classes
    }
}

.o_hr_attendance_kiosk_mode {
    @include media-breakpoint-up(md) {
        min-width: map-get($grid-breakpoints, 'md') * .6;

        .o_hr_attendance_user_badge {
            @include o-position-absolute(auto, $border-width * -1, 100%, $border-width * -1); // Compensate card's border
        }
    }

    .o_hr_attendance_back_button_md {
        aspect-ratio: 1;
        transform: translate(-50%, -50%); // Once migrate to BS5, can be replaced by 'translate-middle' class.
    }

    .o_hr_attendance_PINbox_button {
        aspect-ratio: 1.8;
    }
}
