@import '../../../../scss/styles.scss';

.live-preview-toolbar {
  display: flex;
  background-color: var(--theme-bg);
  color: var(--theme-text);
  height: calc(var(--base) * 1.75);
  align-items: center;
  flex-shrink: 0;

  &--static {
    position: relative;
    width: 100%;
    justify-content: center;
    border-bottom: 1px solid var(--theme-elevation-100);
  }

  &--draggable {
    @include shadow-lg;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 4px;
  }

  &__drag-handle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: grab;

    .icon--drag-handle .fill {
      fill: var(--theme-elevation-300);
    }

    &:active {
      cursor: grabbing;
    }
  }
}