.uni-button-header {
    height: 100%;

    &__icon {

        // @alv @andres Revisar juntos este posicionamiento relativo/absoluto, en la demo no tiene efecto
        @include mq(sm) {
            top: $header-height/3;
            left: $header-height/3;
        }
    }

    &__inner {
        border: 0;
        border-radius: 0;
        background-color: transparent;
        padding: 0 $input-padding;
        min-width: $header-xs-height;
        min-height: $header-xs-height;
        font-size: $font-regular;
        letter-spacing: 0.01em;
        line-height: 1;

        @include mq(sm) {
            min-width: $header-height;
            min-height: $header-height;
        }

        &:hover{
            background-color: $alpha-black-light;
        }

        &:active{
            background-color: $alpha-black-medium;
        }

        // @alv Éste estilo no veo dónde se usa o aplica, si no se usa borrar
        i {
            font-size: $font-large;
        }
        /////////////

        &--only-icon {
            width: $header-xs-height;

            @include mq(sm) {
                width: $header-height;
            }
        }
    }

    // @alv @andres Revisar juntos este modificador para ver qué comportamiento se quiere. No me encajan los estilos, muchos no se aplican en la demo
    &--md {
        height: 100%;

        .uni-button-header__icon {
            height: 20px;
            width: 20px;
            top: $header-height/4;
            left: $header-height/4;
        }

        .uni-button-header__inner {
            min-width: $header-md-height;
            min-height: $header-md-height;

            &--only-icon {
                width: $header-md-height;
            }

            span {
                padding-right: $header-md-height/4;
            }
        }
    }
}