qcast-front/src/styles/calc.scss

// Variables
$colors: (
        'dark-700': #1f2937,
        'dark-600': #334155,
        'dark-500': #4b5563,
        'dark-400': #6b7280,
        'dark-300': #374151,
        'primary': #10b981,
        'primary-dark': #059669,
        'danger': #ef4444,
        'danger-dark': #dc2626,
        'warning': #f59e0b,
        'warning-dark': #d97706,
        'border': #475569
);

// Mixins
@mixin button-styles {
  padding: 0.125rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 0.625rem;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.1s ease-in-out;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

// Calculator Input Wrapper
.calculator-input-wrapper {
  position: relative;
  width: 100%;
  display: inline-block;

  // Input Field
  .calculator-input {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: map-get($colors, 'dark-600');
    border: 1px solid map-get($colors, 'border');
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    text-align: right;
    cursor: pointer;
    font-size: 0.625rem;
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: map-get($colors, 'primary');
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }
  }

  // Keypad Container
  .keypad-container {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    width: 120px;
    background-color: map-get($colors, 'dark-700');
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 0.5rem;
    z-index: 1000;
    animation: fadeIn 0.15s ease-out;
    border: 1px solid map-get($colors, 'border');
    box-sizing: border-box;

    // Keypad Grid
    .keypad-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.125rem;

      // Button Base
      button {
        @include button-styles;
      }

      // Button Types
      .btn-number {
        background-color: map-get($colors, 'dark-500');

        &:hover {
          background-color: map-get($colors, 'dark-400');
        }
      }

      .btn-operator {
        background-color: map-get($colors, 'warning');

        &:hover {
          background-color: map-get($colors, 'warning-dark');
        }
      }

      .btn-clear {
        background-color: map-get($colors, 'danger');
        grid-column: span 2;

        &:hover {
          background-color: map-get($colors, 'danger-dark');
        }
      }

      .btn-delete {
        background-color: map-get($colors, 'dark-500');

        &:hover {
          background-color: map-get($colors, 'dark-300');
        }
      }

      .btn-equals {
        background-color: map-get($colors, 'primary');

        &:hover {
          background-color: map-get($colors, 'primary-dark');
        }
      }

      .btn-zero {
        grid-column: span 2;
      }
    }
  }
}

// Animations
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// Responsive Design
@media (max-width: 640px) {
  .keypad-grid button {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}