// ------------------------------------------------------------
// Settings
// Slug: /ghost/settings/[many]
//
// Styles for the content management page, which is where
// the posts are listed.
//
// * Settings Navigation
// * Content
// * Headers
// * Custom Permalinks
// * Navigation
// * Code Injection
// * Labs
// ------------------------------------------------------------

//
// Navigation
// --------------------------------------------------

.settings-navigation {}

.navigation-item {
    display: flex;

    @media (max-width: 600px) {
        position: relative;
        margin-bottom: 20px;
    }
    @media (min-width: 601px) {
        margin-bottom: 10px;
    }

    // &.last-navigation-item {
    &:last-child {
        padding-left: 17px; // simulate .navigation-item-drag-handle width + horizontal padding

        .navigation-item-drag-handle {
            display: none;
        }
    }
}

.navigation-item-drag-handle {
    padding: 6px 17px 0 0;
    width: 17px;
    cursor: move;

    @media (max-width: 600px) {
        &:before {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -9px;
            z-index: 20;
        }
    }
}

.navigation-inputs {
    width: 100%;
}

.navigation-item-url {
    .fake-placeholder {
        color: lightgrey
    }
}

@media (max-width: 600px) {
    .navigation-item-label {
        margin-bottom: 5px;
    }

    .navigation-item-label,
    .navigation-item-url {
        display: block;
        width: 100%;
    }
}

@media (min-width: 601px) {
    .navigation-inputs {
        display: flex;
    }

    .navigation-item-label {
        flex-grow: 1;
        margin-right: 10px;
    }

    .navigation-item-url {
        flex-grow: 3;
    }
}

.navigation-item-action {
    padding-left: 10px;
    width: 40px;
    position: relative;
    z-index: 10;

    button {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-top: -2px;
    }

    .icon-trash {
        &:before {
            color: $midbrown;
            font-size: 16px;
            transition: color 0.1s linear;
        }

        &:hover:before {
            color: $red;
        }
    }

    .icon-add {
        &:before {
            background: $green;
            color: #fff;
            font-size: 12px;
            padding: 3px;
            border-radius: 2px;
            transition: background 0.1s linear;
        }

        &:hover:before {
            background: darken($green, 10%);
        }
    }
}

//
// Code Injection
// --------------------------------------------------

.settings-code {
    .form-group {
        max-width: 700px;

        p {
            margin: 0 0 4px 0;
        }
    }
    code {
        vertical-align: middle;
    }
}

.settings-code-editor {
    width: 100%;
    min-width: 250px;
    max-width: 680px;
    height: auto;
    border: 1px solid #E0DFD7;
    border-radius: $border-radius;
    -webkit-appearance: none;
    min-height: 300px;
    transition: border-color 0.15s linear;
    line-height: 22px;

    &.focused {
        border-color: $brown;
        outline: 0;
    }

    .CodeMirror {
        border-radius: inherit; // Inherits from .settings-code-editor
    }

    // Overwrite bright yellow text
    .cm-s-xq-light span.cm-meta {
        color: #000;
    }
}

//
// Labs
// --------------------------------------------------

#startupload {
    line-height: inherit;
    
    @media (max-width: 400px) {
        margin-top: 5px;
    }
}