.btn {
    padding: var(--md);
    display: flex;
    width: max-content;
    font-family: var(--secondary);
    font-weight: var(--bold);
    font-size: var(--sm);
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(27, 27, 27, 0.16) 0px 0px 0px 1px, rgba(27, 27, 27, 0.08) 0px 2px 5px 0px;
    
    border: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, border 0.5s ease-out, filter 0.5s ease-out;
    border: 1px solid transparent;
    border-radius: var(--xs);
  
  }
  

  
  .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -500%;
    width: 500%;
    height: 50%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent
    );
    transform: translateX(0) rotate(-45deg);
    transition: transform 0.7s ease-out;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
  }
  
  .btn:hover::after {
    transform: translateX(100%) rotate(-45deg);
  }
  
  .btn:hover {
    transform: translateY(-6px);
    box-shadow: 0px 25px 120px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.35);
    filter: brightness(1.15);
  }
  
  .btn:active {
    transform: translateY(0);
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1);
  }
  
  
  
  .btn--blk {
    background: var(--grey);
    border: 1px solid var(--border);
    color: var(--white);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border);
  }


  .btn--blue {
    background: var(--blue);
    border: 1px solid var(--border);
    color: #fff;
    backdrop-filter: var(--blur);
    border: 1px solid var(--border);
  }