.button__container {
    padding: 15px;

    user-select: none;

    .button__image {
        position: relative;
        float: left;
    }

    .button__icon {
        position: relative;

        padding-right: 10px;

        font-size: 22px;
    }

    .button__icon-right {
        position: relative;

        padding-left: 10px;

        font-size: 22px;
    }

    .button__float-icon {
        position: relative;
        float: left;

        padding-right: 10px;

        font-size: 22px;
    }

    .button__float-icon-right {
        position: relative;
        float: right;

        padding-left: 10px;

        font-size: 22px;
    }

    .button__indicator {
        position: absolute;
        bottom: -5px;
        right: 7px;

        border-radius: 10px;

        width: 15px;
        height: 15px;

        background: var(--light-red);

        animation: fade 4s ease-in-out infinite;
        opacity: 1;
    }
}

.button__container--small {
    font-size: 18px;
    padding: 12px;
}

.button__container--tiny {
    font-size: 12px;
    padding: 0px;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.select-button {
    font-size: medium;
    padding: 0.5em;
    width: 6em;
    float: left !important;
}

.selected {
    background-color: #383838 !important;
}
