//
// Story
// --------------------------------------------------
@use "sass:math";

.story {
  border-style: solid;
  border-radius: $panel-border-radius;
  overflow: hidden;
  height: 100%;

  @include themes(border-color, color-new-border);
  @include themes(border-width, panel-border-width);
  @include themes(background-color, panel-bg);

  li.active {
    a {
      @include themes(color, text-color);
    }
  }

  &-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-tools {
    padding: $panel-padding-y $panel-padding-x;

    @include themes-border-bottom(panel-border-inner);
  }

  &-content {
    flex-grow: 1;
    height: fit-content;
    //@at-root: math.div($grid-unit-y, 2);
    padding-left: $grid-unit-y * 3; // $panel-heading-padding;
    padding-right: $grid-unit-y * 3;
  }

  &-caption {
    margin-bottom: $grid-unit-y;

    &:first-child {
      h3:first-child {
        margin-top: 0;
      }
    }

    &-truncate {
      @include text-overflow-strings(15);
    }
  }

  &-painter {
    display: block;
    margin-bottom: $grid-unit-y * 2;
  }

  &-canvas {
    padding: $grid-unit-y;

    @include border-radius($border-radius-base);
  }

  &-text {
    &:not(:last-child) {
      margin-bottom: $grid-unit-y;
    }
  }

  // States

  &-edit {
    cursor: grabbing;
  }
}

.list-group-bar-active {
  &.active {
    border-bottom: 2px solid $gray;

    @include border-radius($border-radius-base);
  }
}

.story-editor-controls {
  $border-radius-base-border-subtracted: ($border-radius-base * 3) - 1;

  @include border-radiuses(
    0,
    $border-radius-base-border-subtracted,
    $border-radius-base-border-subtracted,
    0
  );
}