// Generate all margins for all sizes
.o-margins-all(@factor: 1) {
    // Unfortunately, the margins sizes are not
    // mathematically related by a single function
    .o-margins(128, @factor);
    .o-margins(96, @factor);
    .o-margins(92, @factor);
    .o-margins(64, @factor);
    .o-margins(48, @factor);
    .o-margins(32, @factor);
    .o-margins(24, @factor);
    .o-margins(16, @factor);
    .o-margins(8, @factor);
    .o-margins(4, @factor);
    .o-margins(0, @factor);
}

// Generate all margins for one size, scalled by a
// given factor (0 <= factor <= 1)
.o-margins(@name, @factor: 1) {
    .o-margins-define(@name, @factor * @name);
}

// Generate all margins for one size, given
// the name of the margin and intended size
.o-margins-define(@name, @size: @name) {
    .mt@{name} {margin-top: ~"@{size}px"!important;}
    .mb@{name} {margin-bottom: ~"@{size}px"!important;}
    .ml@{name} {margin-left: ~"@{size}px"!important;}
    .mr@{name} {margin-right: ~"@{size}px"!important;}
}

// Generate all margins
.o-margins-all();

// It is possible to change the margins ratio for
// small screen sizes using media queries, e.g.:
// @media (max-width: 768px) {
//     .o-margins-all(0.75);
// }

// It is also possible to only redefine single margins
// for small screen sizes using media queries, e.g.:
// @media (max-width: 768px) {
//     .o-margins(64, 0.50);
//     .o-margins(48, 0.50);
// }

// It is also possible to directly redefine the size
// of single margins instead of refering to a factor
// for small screen sizes using media queries, e.g.:
// @media (max-width: 768px) {
//     .o-margins-define(128, 48);
//     .o-margins-define(96, 48);
//     .o-margins-define(64, 48);
// }

a.o_underline {
    text-decoration: underline;
    &:hover {
        text-decoration: underline;
    }
}