@use "sass:color";

$default-background:         #2D3E50;
$font-color:                 #EDF1F2;
$hover-font-color:           #3B9AD9;
$entity-current-font-color:  #FFFFFF;
$msp-btn-remove-background:      #BF3A31;
$msp-btn-remove-hover-font-color:#ffffff;
$msp-btn-commit-on-font-color:   #ffffff;
$entity-badge-font-color:    #ccd4e0;

// used in LOG
$log-message:          #0CCA5D;
$log-info:             #5E3673;
$log-warning:          #FCC937;
$log-error:            #FD354B;

$logo-background: rgba(0,0,0,0.75);

@function color-lower-contrast($color, $amount) {
    @return color.adjust($color, $lightness: -$amount, $space: hsl);
}

@function color-increase-contrast($color, $amount) {
    @return color.adjust($color, $lightness: $amount, $space: hsl);
}

@import '../../mol-plugin-ui/skin/base/base';
@import '../../mol-plugin-ui/skin/base/variables';

a {
    color: $font-color;
    &:hover {
        color: $hover-font-color;
    }
}


.msp-snapshot-description-me {
    background: color.change($default-background, $alpha: 0.5, $space: rgb);

    position: absolute;
    height: 50vh; // 50% of the viewport height
    left: 0;
    top: $control-spacing + $row-height;
    padding: (0.66 * $control-spacing) $control-spacing;

    resize: both; /* Allows resizing in both directions */
    overflow: auto; /* Adjust as needed */

    a {
        text-decoration: underline;
        cursor: pointer;
        color: $font-color;
    }

    ul, ol {
        padding-left: $control-spacing + 4px;
    }

    &.hidden {
        display: none;
    }

    &.shown {
        display: block; // or 'flex', 'grid', etc. depending on your layout
    }
}