/*
Landon Hansen
4/29/2024
Learning to use the web speech api
*/

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

main {
    max-width: 620px;
    margin: auto;
    /* border: 1px solid black; */
}

input {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    font-size: 1.2rem;
}

form {

}

#search-logo {
    text-align: center;
    margin-bottom: 20px;
}

#search-logo > img {
    width: 75px;
}

#search-bar {
    display: flex;
    position: relative;

    column-gap: 8px;

    align-items: center;

    background-color: rgb(245, 245, 245);
    box-shadow: 3px 5px 5px rgb(0, 0, 0, 0.4);

    /* border: 1px solid black; */
    border-radius: 25px;

    height: 50px;
    padding: 10px 20px 10px 20px;

    box-sizing: border-box;

    cursor: text;
}

#search-bar-listen {
    
}

#search-bar-input {
    outline: none;
    border: none;

    height: 100%;
    width: 100%;

    background: none;

    box-sizing: border-box;

    /* border: 1px solid red; */
}

#search-bar > img {
    position: relative;
    /* position: absolute; */
    height: 30px;
}
#search-bar > img:not(#search-bar-submit) { cursor: pointer; }

#search-bar.transcribing::after, #search-bar.transcribing::before {
    position: absolute;
    content: "";

    background-color: rgb(0,0,0,0.4);
    color: white;
}

#search-bar.transcribing::after {
    position: absolute;

    bottom: -10px;
    right: 0;

    transform: translateY(100%);

    content: "Actively transcribing ...";

    /* width: 150px; */
    height: 2.5em;
    /* height: auto; */

    padding: 10px;
    border-radius: 5px;

    box-sizing: border-box;
}

#search-bar.transcribing::before {
    right: 20px;
    bottom: -10px;

    width: 20px;
    height: 10px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}