/* OneDrive Preview component CSS. */
:root {
    --shadow-2: rgb(0, 0, 0, 0.2);
}

.se-preview-container {
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.navbar.se-preview-navbar {
    padding: .1rem 0.3rem;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.navbar.se-preview-navbar .se-navbar-item button {
    color: #666;
}
.navbar.se-preview-navbar .spinner {
    padding: 0;
}

.se-onedrive-preview-component {
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: 0 2px 1px var(--shadow-2);
    border-radius: 6px;
}

iframe.se-onedrive-preview {
    border: 0;
    width: 100%;
    height: 100%;
}

.no-authenticated {
    padding: 40% 0;
}
.no-authenticated button > img, .no-preview button > img {
    width: 32px;
}
.no-authenticated button, .no-preview button {
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 1em;
}
.no-authenticated button:hover, .no-preview button:hover {
    background: #fff;
    box-shadow: 0px 3px 5px -5px #666;
    text-decoration: none;
}
.no-authenticated p {
    position: relative;
    top: 4px;
}

.no-preview {
    margin: 0;
}
.no-preview p {
    padding-top: 30%;
    color: #888;
    margin-bottom: 0.3em;
}
.no-preview-message {
    margin: 12px 0;
    opacity: 0.7;
}
.no-preview-message code {
    font-size: 0.8em;
    border: 1px solid #CCC;
    border-radius: 3px;
    padding: 2px 4px;
    background: #f2f2f2;
}

.ase-spinner.preview {
    margin: 20px 0;
    width: 100%;
    padding: 30%;
}