$borderRadius: 6px;
@use "sass:map";
//@use "03-components/console/console-color-theme";
//@use "02-variables/globals";
//@use "01-vendors/highlights-themes/an-old-hope";
@use "01-vendors/hljs-theme" as *;


@use "02-variables/globals" as colors;
@use "03-components/console/console-color-theme" as theme;
// ─── console-color-theme.scss ───────────────────────────────────────────
// Turn your styling into a mixin that takes a map as a parameter:

#spyne-plugin-console {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  //overflow: hidden;
  @include cms-hljs-theme;

  #spyne-plugin-console-content-holder {
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    min-width: 180px;
    min-height: 60px;
    max-width: 900px;
    background: silver;
    transition: width, height .125s ease-out;

   // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   // box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;


    display: flex;
    flex-direction: column;
    justify-content: space-around;


    padding: 1rem;
    font-family: sans-serif;
    margin: 0 1rem;
    max-height: 80vh;
    overflow: visible;

    &:active{
      transition:none;
    }


    &.top {
      top: 0;
      border-bottom-left-radius: $borderRadius;
      border-bottom-right-radius: $borderRadius;

      #grabber {
        bottom: 1px;
        border-bottom-left-radius: $borderRadius;
        border-bottom-right-radius: $borderRadius;
      }

    }

    &.left {
      left: 0;
    }

    &.right {
      right: 0;
    }

    &.bottom {
      bottom: 0;
      border-top-left-radius: $borderRadius;
      border-top-right-radius: $borderRadius;


      #grabber {
        top: 2px;
        border-top-left-radius: $borderRadius;
        border-top-right-radius: $borderRadius;


      }


    }


    p {
      position: relative;
      line-height: 1.2rem;
      //margin-bottom: 1.2rem;
    }

    &.active {


      #grabber {
        position: absolute;
        left: 0;

        content: 'spyne console';
        font-family: sans-serif;
        color: #ddd;
        font-size: 10px;
        text-align: center;
        letter-spacing: 1px;
        //font-weight: 800;
        margin: 0 1px;
        //background: #5B6370;
        width: calc(100% - 2px);
        height: 15px;
        //border-top: 1px solid rgba(255, 255, 255, .4);
        //opacity: .6;
        cursor: pointer;
        pointer-events: all;
        display: flex;;
        justify-content: center;
        align-items: center;

        p {
          position: relative;
          padding: 0;
          margin: 0;
        }
      }


    }

  }

  &.dark {
    @include theme.console-color-theme(colors.$plugin-console-dark-mode);
  }

  &.light {
    @include theme.console-color-theme(colors.$plugin-console-light-mode);
    // @include console-color-theme(globals.$plugin-console-light-mode);
  }


  /*
  &.dark{
    $colorMap:$plugin-console-dark-mode;
    @import "03-components/console/console-color-theme";
  }


  &.light{
    $colorMap:$plugin-console-light-mode;
    @import "03-components/console/console-color-theme";
  }
  */


/*
  &.light{
    $colorMap:$light-mode;


  }


  &.dark {

    $colorMap:$dark-mode;

  }*/



  &.light{



  }






}