[data-theme='huddle'] {
  --button-size: 3.125rem;
  --lk-primary-color: #e23067;
  --lk-primary-bg: whitesmoke;
  --lk-secondary-color: lightgrey;

  .button {
    border: 0px;
    box-shadow: 0 0 1px rgb(29 28 29 / 13%), 0 1px 3px 0 rgb(0 0 0 / 8%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    background-color: var(--lk-primary-bg);
    cursor: pointer;

    &[aria-pressed='false'] {
      background-color: var(--lk-primary-bg);
    }
  }

  .button[data-source] {
    height: var(--button-size);
    width: var(--button-size);
    aspect-ratio: 1/1;
    border-radius: 99999px;
  }

  .disconnect-button {
    width: calc(1.5 * var(--button-size));
    height: var(--button-size);
  }

  .button[data-source='microphone'] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpath d='M176.4,181.3A72,72,0,0,1,56.4,136' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M154.9,157.6A39.6,39.6,0,0,1,128,168h0a40,40,0,0,1-40-40V84' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cline x1='128' y1='200' x2='128' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cline x1='48' y1='40' x2='208' y2='216' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M94,43a39.8,39.8,0,0,1,34-19h0a40,40,0,0,1,40,40v60.4' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M199.6,136a72.4,72.4,0,0,1-4.5,18.2' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E");
    &[aria-pressed='true'] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Crect x='88' y='24' width='80' height='144' rx='40' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/rect%3E%3Cline x1='128' y1='200' x2='128' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M199.6,136a72.1,72.1,0,0,1-143.2,0' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E");
    }
  }

  .button[data-source='camera'] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolygon points='240 176 184 144 184 112 240 80 240 176' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polygon%3E%3Cline x1='34.9' y1='24' x2='224' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M110.9,60H176a8,8,0,0,1,8,8v76' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M184,188a8,8,0,0,1-8,8H24a8,8,0,0,1-8-8V68a8,8,0,0,1,8-8H67.6' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E");
    &[aria-pressed='true'] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpath d='M24,60H152a32,32,0,0,1,32,32v96a8,8,0,0,1-8,8H48a32,32,0,0,1-32-32V68A8,8,0,0,1,24,60Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpolyline points='184 112 240 80 240 176 184 144' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");
    }
  }

  .join-button {
    background-color: var(--lk-primary-color);
  }
}