/*
 * CollapseToggle.css
 *
 * Copyright (C) 2022 by Posit Software, PBC
 *
 * Unless you have received this program directly from Posit Software pursuant
 * to the terms of a commercial license agreement with Posit Software, then
 * this program is licensed to you under the terms of version 3 of the
 * GNU Affero General Public License. This program is distributed WITHOUT
 * ANY EXPRESS OR IMPLIED WARRANTY, INCLUDING THOSE OF NON-INFRINGEMENT,
 * MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Please refer to the
 * AGPL (http://www.gnu.org/licenses/agpl-3.0.txt) for more details.
 *
 */
@external editor_dark;

@url EXPAND_LIGHT expand2x;
@url EXPAND_DARK expandDark2x;
@url COLLAPSED_LIGHT collapsed2x;
@url COLLAPSED_DARK collapsedDark2x;

.toggle
{
    position: absolute;
    top: 0px;
    left: -20px;
    padding: 4px;
    cursor: pointer;
    transition-property: transform, opacity, filter;
    transition-duration: 0.2s;
}

.expandIcon, .collapsedIcon
{
    background-size: 100%;
}

.expandIcon
{
    width: 10px;
    height: 10px;
    background-image: EXPAND_LIGHT;
}

.editor_dark .expandIcon
{
    background-image: EXPAND_DARK;
}

.collapsedIcon
{
    width: 20px;
    height: 20px;
    background-image: COLLAPSED_LIGHT;
}

.editor_dark .collapsedIcon
{
    background-image: COLLAPSED_DARK;
}

.collapsed
{
    position: absolute;
    right: 0px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    transition-property: filter, opacity;
    transition-duration: 0.2s;
    z-index: 1;
    opacity: 0.5;
}

.collapsed:hover
{
    opacity: 0.7;
}

