.audio-preview {
    display: inline-block;

    &-content {
        position: relative;
        right: auto;
        margin-bottom: 4px;
        max-height: 456px;
        overflow: auto;
        width: 300px;

        &-ul {
            margin:0;
            padding:0;
            list-style-type: none;
        }
    }

    &-header:hover {
        background-color: initial;
        cursor: initial;
    }

    &-entry-text {
        max-width: 213px;

        &.left-margin {
            margin-left: 36px;
        }
    }

    &-speaker {
        position: relative;

        &:hover, &:focus-within, &:focus {
            .audio-preview-test-button {
                display: inline-block;
            }

            .audio-preview-entry-text {
                max-width: 178px;
                margin-right: 0;
            }
        }

        .audio-preview-entry-text {
            max-width: 238px;
        }
    }

    &-microphone {
        position: relative;

        &--nometer {
            .audio-preview-entry-text {
                max-width: 238px;
            }
        }

        &--withmeter {
            .audio-preview-entry-text {
                max-width: 178px;
            }
        }

    }

    &-icon {
        border-radius: 50%;
        display: inline-block;
        width: 14px;

        &--exclamation {
            margin-left: 6px;

            & svg {
                fill: #E54B4B;
            }
        }
    }

    &-test-button {
        display: none;
        padding: 4px 10px;
        position: absolute;
        right: 16px;
        top: 6px;
    }

    &-meter-mic {
        position: absolute;
        right: 16px;
        top: 14px;
    }

    &-checkbox-container {
        padding: 10px 16px;
    }
}