bem-components/attach using Pobem

attach_theme_islands.styl

block(attach).mod(theme islands)
{
    font-family: Arial, Helvetica, sans-serif;

    display: inline-block;

    white-space: nowrap;

    elem(control)
    {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 100%;
        margin: 0;

        opacity: 0;
    }

    elem(file),
    elem(no-file)
    {
        display: inline;

        margin-left: 0.4em;
    }

    elem(clear)
    {
        display: inline-block;

        margin-left: 0.4em;

        cursor: pointer;
        transition: opacity 0.1s ease-out;
        vertical-align: middle;

        opacity: 0.3;
        background: center no-repeat;

        &:hover
        {
            opacity: 1;
        }
    }

    mod(disabled)
    {
        elem(no-file),
        elem(file)
        {
            opacity: 0.6;
        }
    }

    mod(size s) { font-size: 13px; }
    mod(size m) { font-size: 13px; }
    mod(size l) { font-size: 15px; }
    mod(size xl) { font-size: 18px; }

    mod(size s) elem(clear),
    mod(size m) elem(clear) {
        width: 10px;
        height: 14px;

        background-image: url(../../theme/_islands/clear_size_s.svg);
    }

    mod(size l) elem(clear),
    mod(size xl) elem(clear) {
        width: 14px;
        height: 14px;

        background-image: url(../../theme/_islands/clear_size_l.svg);
    }

    block(button)
    {
        position: relative;

        elem(text)
        {
            display: inline;

            z-index: 1;
        }
    }
}