:block(attach):mod(theme islands) {
    font-family: var(--attach-fontFamily);

    display: inline-block;

    white-space: nowrap;

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

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

        cursor: pointer;

        opacity: 0;
    }

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

        margin-left: 0.4em;
    }

    :block(attach):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;
        }
    }

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

    &:block(attach):mod(size s) { font-size: var(--attach-size-s-fontSize); }
    &:block(attach):mod(size m) { font-size: var(--attach-size-m-fontSize); }
    &:block(attach):mod(size l) { font-size: var(--attach-size-l-fontSize); }
    &:block(attach):mod(size xl) { font-size: var(--attach-size-xl-fontSize); }

    &:block(attach):mod(size s) :block(attach):elem(clear),
    &:block(attach):mod(size m) :block(attach):elem(clear) {
        width: var(--attach-size-s-clear-width);
        height: var(--attach-size-s-clear-height);

        background-image: var(--attach-clear);
    }

    &:block(attach):mod(size l) :block(attach):elem(clear),
    &:block(attach):mod(size xl) :block(attach):elem(clear) {
        width: var(--attach-size-l-clear-width);
        height: var(--attach-size-l-clear-height);

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

    :block(button) {
        position: relative;

        &:elem(text) {
            display: inline;

            z-index: 1;
        }
    }
}