.record-btn-component{touch-action:auto;border-radius:90px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:85px;height:85px;padding:14px 22px 12px;display:flex}.record-btn-component[state=record]{border:1px solid var(--primary-bright-blue);background:var(--primary-white);box-shadow:0 1px 17px -3px #025db866}.record-btn-component[state=record] .icon{fill:var(--primary-bright-blue)}.record-btn-component[state=play]{border:1px solid var(--secondary-green);background:var(--primary-white);box-shadow:0 1px 17px -3px #025db866}.record-btn-component[state=play] .icon{fill:var(--secondary-green)}.record-btn-component[state=stop]{border:1px solid var(--secondary-red);background:var(--secondary-pale-red);box-shadow:0 0 26px #c41e1e36}.record-btn-component[state=stop] .icon{fill:var(--secondary-red)}.record-btn-component[state=disabled]{border:1px solid var(--disabled-btn-background);background:var(--disabled-btn-background);color:var(--disabled-btn-text);cursor:not-allowed}.record-btn-component[state=disabled] .icon{fill:var(--disabled-btn-text)}@media (hover:hover){.record-btn-component[state=record]:hover{border:1px solid var(--secondary-green);background:var(--secondary-pale-green)}.record-btn-component[state=record]:hover .icon{fill:var(--secondary-green)}.record-btn-component[state=play]:hover{background:var(--secondary-pale-green)}.record-btn-component[state=stop]:hover{box-shadow:0 0 28px #c41e1e52}}.record-btn-component .icon-only{display:flex}.record-btn-component .icon-only svg{width:30px;height:30px}