/* --- Widget Theme --- */
@use 'breakpoints.scss' as *;

$widgetBorderRadius: 5px;

.widgetContainer{
  width: 250px;
  height: 175px;
  // Fixes bug on windows which causes widget to be crushed when there is not enough vertical space
  min-height: 175px;
  border: 1px solid black;
  margin-top:25px;
  border-radius: $widgetBorderRadius;
  // https://css-tricks.com/absolute-positioning-inside-relative-positioning/
  position:relative;
  user-select: none; /* standard syntax */
  display: table;

  @include gt-sm{
    transform-origin: top;
    transform: scale(1.5);
    margin-bottom:calc(175px / 2);
  }
  @include gt-md{
    transform-origin: top;
    transform: scale(2);
    margin-bottom:175px;
  }
}

.widgetTopBar{
  width: 248px;
  background-color: var(--background-primary);
  height: 25px;
  position: absolute;
  z-index: 2;
  border-top-right-radius: $widgetBorderRadius;
  border-top-left-radius: $widgetBorderRadius;
}
.widgetSideBar{
  background-color: var(--background-secondary);
  width: 50px;
  height: 173px;
  position: absolute;
  z-index: 1;
  border-bottom-left-radius: $widgetBorderRadius;
  border-top-left-radius: $widgetBorderRadius;
  box-shadow: 4px 0 10px -2px #0000006c;
  font-size:8px;
  padding-top:30px;
  display:flex;
  flex-direction: column;
  padding-left:2px;
}
.widgetContentContainer{
  height: 173px;
  width: 248px;
  padding-top: 30px;
  padding-left: calc(40px + 20px);
  padding-right: 20px;
  font-size:8px;
  position: absolute;
  border-radius: $widgetBorderRadius;
}
.widgetIconContainer{
  display:inline;
  cursor:pointer;

}
.topBarLeft{
  margin-left: 5px;
  display:inline;
  > .widgetIconContainer{
    margin-left: 2px;
    color: var(--text-secondary);

    :hover{
      color:var(--text-primary);
    }
  }
}
.topBarRight{
  margin-left: 175px;
  display:inline;
  > .widgetIconContainer{
    margin-left: 2px;
    color: var(--text-secondary);

    :hover{
      color:var(--text-primary);
    }
  }
}

.topBarTitle{
  color:var(--text-primary);
  position: absolute;
  margin-left: 112px;
  margin-top: 8px;
  font-size:8px;
}
/* --- End Widget Theme --- */


.imageExample{
  // position:"absolute";
  margin-top:15px;
  margin-left:calc((168px / 2) - 20px);
}

.noteContainer{
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}