/*** Fieldset: Slug ***/

fieldset.bolt-field-slug {
    $background-readonly: #f8f8f8;
    $color-readonly:      #999;

    .input-group-addon {
        background: $background-readonly;
        color: $color-readonly;
        padding: 2px 0 1px 10px;
        border-right: none;

        // State display.
        &:before {
            display: inline-block;
            width: 21px;
            margin-right: 10px;
            text-align: center;
            font-family: FontAwesome;
            color: #000;
            content: $fa-var-lock;
        }
    }

    input {
        padding-left: 1px;
        border-left: none;
        text-overflow: ellipsis;
        color: $color-readonly;
        // Correct something (probably) wrong in Bootstrap customizing:
        height: 33px !important;
        border-radius: 0 !important;

        &[readonly] {
            background: $background-readonly;
            box-shadow: none;
        }
    }

    button {
        // Make the dropdown button more narrow.
        padding-left: 8px;
        padding-right: 8px;
        height: 33px !important;
    }

    li.link {
        white-space: normal;

        a {
            white-space: normal;
        }

        i {
            position: absolute;
        }

        span {
            display: block;
            margin-left: 21px;
        }

        var {
            color: #888;
        }
    }

    .edititable {
        .input-group-addon, input {
            background: #fff;
        }

        input {
            color: inherit;
        }

        .input-group-addon:before {
            content: $fa-var-pencil;
        }
    }

    .linked {
        .input-group-addon:before {
            content: $fa-var-link;
        }
    }

    .loading {
        .input-group-addon:before {
            animation: fa-spin 2s infinite linear;
            animation-delay: 0.5s
        }
    }

    .warning {
        margin-top: 4px;
        margin-left: 10px;
        color: #800;
    }
}
