// @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
@use '~/styles/bootstrap/init' as bs;
@use '~/styles/mixins';

$btn-line-height: 1.2rem;

.grw-page-editor-mode-manager :global {
  .btn {
    width: 70px;
    white-space: nowrap;

    @include mixins.border-vertical('before', 70%, 1, true);

    &.view-button,
    &.edit-button {
      line-height: $btn-line-height;
      .grw-page-editor-mode-manager-icon {
        @include bs.media-breakpoint-down(sm) {
          font-size: 1.2rem;
        }
      }
    }
    &.hackmd-button {
      line-height: $btn-line-height;
      .grw-page-editor-mode-manager-icon {
        @include bs.media-breakpoint-down(sm) {
          font-size: 1.2rem;
        }
      }
      .grw-page-editor-mode-manager-label {
        font-size: 12px;
        letter-spacing: -0.6px;
      }
    }
  }
}

.grw-page-editor-mode-manager-skeleton :global {

  width: 213px;
  height: calc($btn-line-height + bs.$btn-padding-y*2 + bs.$btn-border-width*2);
}