/*
 * Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.list {
    flex: auto 0 1;
    overflow-y: auto;
    border: 1px solid rgb(231, 231, 231);
    flex-direction: column;
}

.list-separator {
    background: rgb(231, 231, 231);
    height: 1px;
}

.list-item {
    flex: none;
    min-height: 30px;
    display: flex;
    align-items: center;
    position: relative;
}

.list-item:hover {
    background: hsl(0, 0%, 96%);
}

.controls-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
}

.controls-gradient {
    flex: 0 1 50px;
}

.list-item:hover .controls-gradient {
    background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
}

.controls-buttons {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: auto;
}

.list-item:hover .controls-buttons {
    background-color: hsl(0, 0%, 96%);
}

.remove-button,
.edit-button {
    background-image: url(Images/toolbarButtonGlyphs.png);
    background-size: 352px 168px;
    width: 32px;
    height: 24px;
    opacity: 0.5;
    cursor: pointer;
    flex: none;
    visibility: hidden;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
.remove-button,
.edit-button {
    background-image: url(Images/toolbarButtonGlyphs_2x.png);
}
} /* media */

.list-item:hover .remove-button,
.list-item:hover .edit-button {
    visibility: visible;
}

.remove-button:hover,
.edit-button:hover {
    opacity: 0.7;
}

.remove-button {
    background-position: -128px -24px;
}

.edit-button {
    background-position: -160px 0px;
}

.editor-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: none;
    background: hsl(0, 0%, 96%);
    overflow: hidden;
}

.editor-content {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.editor-buttons {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
}

.editor-buttons > button {
    flex: none;
    margin-right: 10px;
}

.editor-content input {
    margin-right: 10px;
}

.editor-content input.error-input {
    background-color: white;
}
