How can I get this border to appear on above the button elements?

codepen: https://codepen.io/cnelson720/pen/bGaYNBw

I'm trying to emulate the style of the Mac calculator. https://ibb.co/r5FRx56 original is on the left, mine is on the right.

I am trying to get the inset box-shadow to appear above the buttons.

I've tried messing with z-index, as well as giving it the required position properties, no luck so far

.calculator{
    margin: auto;
    margin-top: 35vh;
    height: 325px;
    width: 235px;
    border-radius: 10px;
    /*
    border: 0.1px solid black;
    */
    box-shadow: 0px 10px 25px rgb(80, 80, 80);
    background: var(--bg-color);
}

.border{
    z-index: 1;
    border-radius: 10px;
    border: 0.1px solid black;
    box-shadow: inset 0px 0px 2px white;
}
.buttons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1px;
    column-gap: 1px;
}

.btn{
    background: var(--li-btn);
    border: none;
    padding: 0;
    margin: 0;
    height: 47px;
    color: white;
    font-size: 1.4rem;
}

I tried giving an inset box-shadow to an element within the calculator div. I was hoping to give it a z-index of 1 so that this inset box-shadow appears above everything else within the div (above the buttons)

Solution

In your btn class, you should add the following rule:

.btn {
    background : RGBA(126, 126, 126, .066);
}

The only downside is that you can't use your CSS variables with this anymore.

Here is a working snippet:

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement){
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear();
    }

    clear(){
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }

    delete(){
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }

    appendNumber(number){
        if(number === '.' && this.currentOperand.includes('.')) return;
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }

    chooseOperation(operation){
        if (this.currentOperand === '') return;
        if (this.previousOperand !== ''){
            this.compute();
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }

    compute(){
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);
        if(isNaN(prev) || isNaN(current)) return;

        switch(this.operation){
            case '+':
                //sum
                computation = prev + current;
                break;
            case '-':
                //sub
                computation = prev - current;
                break;
            case 'x':
                //multiply
                computation = prev * current;
                break;
            case '÷':
                //divide
                computation = prev / current;
                break;
            default:
                return;
        }

        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }

    getDisplayNumber(number){
        const stringNumber = number.toString();
        const integerDigits = parseFloat(stringNumber.split('.')[0]);
        const decimalDigits = stringNumber.split('.')[1];
        let integerDisplay;

        if(isNaN(integerDigits)){
            integerDisplay = '';
        } else {
            integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0});
        }

        if(decimalDigits != null){
            return `${integerDisplay}.${decimalDigits}`;
        } else {
            return integerDisplay;
        }
    }

    updateDisplay(){
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);

        if(this.operation != null){
            this.previousOperandTextElement = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }
    }
}

const numberButtons = document.querySelectorAll('.number');
const operationButtons = document.querySelectorAll('.operation');
const equalsButton = document.querySelector('#equal');
const clearButton = document.querySelector('#clear');
const previousOperandTextElement = document.querySelector('.previous-operand');
const currentOperandTextElement = document.querySelector('.current-operand');

//calc object
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);

currentOperandTextElement.innerText = 0;

numberButtons.forEach(button => {
    button.addEventListener('click', ()=>{
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
        console.log(button);
    })
});

operationButtons.forEach(button =>{
    button.addEventListener('click', ()=>{
        calculator.chooseOperation(button.innerText);
        calculator.updateDisplay();
    })
});

equalsButton.addEventListener('click', button =>{
    calculator.compute();
    calculator.updateDisplay();
});

clearButton.addEventListener('click', button =>{
    calculator.clear();
    calculator.updateDisplay();
})

:root{
    --org-btn: #fa9f29;
    --bg-color: #545357;
    --li-btn: #7E7E80;
    --dr-btn: #656467;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

.calculator{
    margin: auto;
    margin-top: 20vh;
    height: 325px;
    width: 235px;
    border-radius: 10px;
    /*
    border: 0.1px solid black;
    box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
    */
    background: var(--bg-color);
}

.border{
    border-radius: 10px;
    border: 0.1px solid black;
    box-shadow: inset 0px 0px 2px white, 0px 10px 25px rgb(80, 80, 80);
}

.output{
    height: 82px;
    width: 100%;

    display: flex;
    justify-content: flex-end;
    align-content: flex-end;
}

.previous-operand, .current-operand{
    color: white;
    font-size: 3.5rem;
    padding-top: 5%;
    padding-right: 3%;
}

.buttons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1px;
    column-gap: 1px;
}

.btn{
    background : RGBA(0, 0, 0, .066);
    border: none;
    padding: 0;
    margin: 0;
    height: 47px;
    color: white;
    font-size: 1.4rem;
}
.btn:active{
    background: rgb(182, 182, 182);
}

.dark{
    background : RGBA(126, 126, 126, .066);
}

.orange{
    background : RGBA(250, 159, 41)
}
.orange:active{
    background: #b8751d;
}
.bottom{
    height: 51px;
}
.bottom-left{
    height: 51px;
    border-bottom-left-radius: 9px;
    grid-column: 1/3;
}
.bottom-right{
    height: 51px;
    border-bottom-right-radius: 9px;
}

<div class="calculator">

      <div class="border">

        <div class="output"><div class="previous-operand" editable></div><div class="current-operand"></div></div>

        <div class="buttons">

          <button class='btn dark' id="clear">AC</button class='btn'>
          <button class='btn dark' id="pos-neg">+/-</button class='btn'>
          <button class='btn dark' id="percent">%</button class='btn'>
          <button class='btn operation orange' id="divide">÷</button class='btn'>

          <button class='btn number' id="7">7</button class='btn'>
          <button class='btn number' id="8">8</button class='btn'>
          <button class='btn number' id="9">9</button class='btn'>
          <button class='btn operation orange' id="multiply">x</button class='btn'>

          <button class='btn number' id="4">4</button class='btn'>
          <button class='btn number' id="5">5</button class='btn'>
          <button class='btn number' id="6">6</button class='btn'>
          <button class='btn operation orange' id='minus'>-</button class='btn'>

          <button class='btn number' id="1">1</button class='btn'>
          <button class='btn number' id="2">2</button class='btn'>
          <button class='btn number' id="3">3</button class='btn'>
          <button class='btn operation orange' id="plus">+</button class='btn'>

          <button class='btn number bottom-left' id="zero">0</button class='btn'>
          <button class='btn number bottom' id="decimal">.</button class='btn'>
          <button class='btn orange bottom-right' id="equal">=</button class='btn'>


  </div>
 </div>
</div>