._button_q3lz3_1 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.875rem;
  cursor: pointer;
  border-style: none;
  border-radius: 0.5rem;

  &:hover {
    background-color: var(--white-1);
  }

  &:active {
    background-color: var(--white-2);
  }

  &._overlay_q3lz3_19 {
    background-color: var(--primary-bg-05);

    &:hover {
      background-color: var(--black-3);
    }

    &:active {
      background-color: var(--black-3);
    }
  }

  &[disabled],
  &[aria-disabled] {
    cursor: default;
    background-color: transparent;
    opacity: 0.625;
  }
}._square_q3lz3_39,
._round_q3lz3_40 {
  aspect-ratio: 1;
  padding: 0.25rem;

  &._overlay_q3lz3_19 {
    padding: 0.5rem;
  }
}._round_q3lz3_40 {
  border-radius: 9999px;
}._loadingOverlay_q3lz3_53 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;

  transition: opacity 0.25s;

  &._loading_q3lz3_53 {
    opacity: 1;
    transition-delay: 0.25s;

    .miru-icon {
      animation: _loading-spinner_q3lz3_1 2s linear infinite;
    }
  }

  .miru-icon {
    font-size: 2rem;
    background-color: var(--black-2);
    border-radius: 50%;
  }
}@keyframes _loading-spinner_q3lz3_1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

._textSmall_7jyqm_1 {
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
}

._textBodySmall_7jyqm_1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

._textBody_7jyqm_1 {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
}

._textBodyBold_7jyqm_1 {
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}

._textBodyBig_7jyqm_1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

._textBodyBigBold_7jyqm_1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

._textGreat_7jyqm_1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

._textSuperGreat_7jyqm_1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

._numeric_7jyqm_1 {
  font-family: sans-serif;
  font-variant-numeric: tabular-nums;
}

._srOnly_7jyqm_1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0, 0, 0, 0);
}

._safePaddingX_7jyqm_1 {
  padding-right: max(env(safe-area-inset-right, 1.25rem), 1.25rem);
  padding-left: max(env(safe-area-inset-left, 1.25rem), 1.25rem);
}

._safePaddingY_7jyqm_1 {
  padding-top: max(env(safe-area-inset-top, 1.25rem), 1.25rem);
  padding-bottom: max(env(safe-area-inset-bottom, 1.25rem), 1.25rem);
}

._host_7jyqm_1 {
  --black: #000;
  --white: #fff;
  --gray: #252525;
  --red-dark: #e83757;
  --red: #ff5372;
  --red-light: #ff7a92;
  --purple-dark: #8f54f9;
  --purple: #a06efb;
  --purple-light: #ac7dff;
  --yellow-dark: #ead627;
  --yellow: #feea38;
  --yellow-light: #fff38b;
  --green-dark: #03b072;
  --green: #03ad70;
  --green-light: #1ed291;
  --black-1: rgb(0 0 0 / 10%);
  --black-2: rgb(0 0 0 / 30%);
  --black-3: rgb(0 0 0 / 60%);
  --white-1: rgb(255 255 255 / 10%);
  --white-2: rgb(255 255 255 / 30%);
  --white-3: rgb(255 255 255 / 60%);
  --ruler-height: 1rem;
  --ruler-spacing-top: 0.25rem;
  --ruler-spacing-bottom: 2.625rem;
  --primary-bg: #171717;
  --primary-bg-05: #17171788;
}

._slot_7jyqm_1 {
  display: contents;
}

._viewport_7jyqm_11 {
  position: relative;
  display: flex;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
}

._viewportCanvas_7jyqm_1 {
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
  border-radius: 1.25rem;
}

._host_7jyqm_1 .miru-icon {
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
}

._button_7jyqm_1 {
}

._square_7jyqm_1 {
}

._round_7jyqm_1 {
}

@scope (._host_7jyqm_1) {
  :scope {
    --clip-height: 2.75rem;
    --clip-resize-handle-width: 1.5rem;
    --clip-selected-color-accent: var(--yellow);
    --clip-selected-color-text: var(--black);
  }
}

._clip_7jyqm_64 {
  height: var(--clip-height);

  &:focus-visible {
    outline: none;
  }
}

._clip_7jyqm_64._isSelected_7jyqm_1 {
  touch-action: pan-y;
}

._clip_7jyqm_64._isDragging_7jyqm_1 {
  z-index: 20;
}

._clipBox_7jyqm_69 {
  position: absolute;

  left: var(--clip-box-left);
  width: calc(var(--clip-box-right) - var(--clip-box-left));
  height: var(--clip-height);
  cursor: pointer;
  user-select: none;

  background-color: var(--clip-color);
  border-radius: 0.5rem;

  transition: background-color 0.25s;
}

._clipName_7jyqm_1 {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0.125rem;
  line-height: 1;
  color: var(--white);
  background-color: var(--black-2);
  border-radius: 0.5rem;
  transition: transform 0.25s;

  ._clip_7jyqm_64._canResizeLeft_7jyqm_1._isSelected_7jyqm_1 & {
    transform: translate(1.75rem, 0);
  }
}

._clipTransition_7jyqm_1 {
  position: absolute;
  top: 50%;
  left: var(--clip-box-right);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--white);
  background: var(--black);
  border-radius: 0.5rem;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  transition: transform 0.2s;

  ._clip_7jyqm_64._isSelected_7jyqm_1 & {
    transform: translate(0%, -50%);
  }

  ._clip_7jyqm_64._nextIsSelected_7jyqm_1 & {
    transform: translate(-100%, -50%);
  }
}

._clipControls_7jyqm_1 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-color: var(--clip-selected-color-accent);
  border-style: solid;
  border-width: 0.125rem;
  border-radius: calc(0.5rem + 0.125rem);
  opacity: 0;
}

._clip_7jyqm_64._isSelected_7jyqm_1 ._clipControls_7jyqm_1 {
  pointer-events: auto;
  opacity: 1;
}

._clipResizeLeft_7jyqm_1,
._clipResizeRight_7jyqm_1 {
  position: absolute;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: var(--clip-resize-handle-width);
  height: 100%;
  color: var(--clip-selected-color-text);
  touch-action: none;
  cursor: ew-resize;
  background-color: var(--clip-selected-color-accent);
}

._clipResizeLeft_7jyqm_1 {
  left: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}

._clipResizeRight_7jyqm_1 {
  right: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

._clip_7jyqm_64._isSelected_7jyqm_1._canResizeLeft_7jyqm_1 ._clipResizeLeft_7jyqm_1,
._clip_7jyqm_64._isSelected_7jyqm_1 ._clipResizeRight_7jyqm_1 {
  visibility: visible;
}

._videoTrimmer_7jyqm_4 {
  display: flex;
  flex-direction: column;
  width: inherit;
  height: inherit;
  overflow: hidden;

  ._viewport_7jyqm_11 {
    flex-shrink: 1;
    max-height: min(60vh, calc(100vh - 19rem));

    &._isEmpty_7jyqm_15 {
      min-height: 16rem;
    }
  }
}

._error_7jyqm_21 {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2rem;
  font-size: 1.5rem;
  color: var(--white);
  background-color: var(--black-3);
  translate: -50% -50%;
}

._controls_7jyqm_32 {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  place-items: center;
  padding: 0.25rem 0;

  ._iconButton_7jyqm_38 {
    font-size: 2rem;
  }
}

._controlsCenter_7jyqm_43 {
  flex-grow: 1;
  text-align: center;
}

._controlsLeft_7jyqm_48 {
  justify-self: start;
}

._controlsRight_7jyqm_52 {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-self: end;
}

._timeline_7jyqm_59 {
  position: relative;
  margin: 0 1.5rem;
  touch-action: none;

  ._clip_7jyqm_64 {
    position: relative;
    border-radius: 0;
  }

  ._clipBox_7jyqm_69 {
    left: calc(var(--clip-box-left) - var(--clip-resize-handle-width));
    width: calc(var(--clip-box-right) - var(--clip-box-left) + 2 * var(--clip-resize-handle-width));
  }
}

._clipWarning_7jyqm_75 {
  position: relative;
  inset: 0;
  display: flex;
  place-content: center;
  place-items: center;
  height: inherit;
  pointer-events: none;

  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    background-color: currentcolor;
    border-radius: 0.25rem;
    opacity: 0.15;
  }
}

._scrubber_7jyqm_95 {
  position: absolute;
  inset: 0;
  touch-action: none;
}

._cursor_7jyqm_101 {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: 0;
  width: 0.125rem;
  pointer-events: none;
  background-color: currentcolor;
  translate: calc(var(--current-time-offset) - 50%);
}

media-trimmer[data-v-7e09c7ff] {
  --clip-selected-color-accent: hsl(216deg 79% 50%);
  --clip-selected-color-text: white;
}