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

@layer payload-default {
  .inline-toolbar-popup {
    display: flex;
    align-items: center;
    background: var(--theme-input-bg);
    padding: base(0.2);
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    border-radius: $style-radius-m;
    transition: opacity 0.2s;
    will-change: transform;
    box-shadow:
      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
      0px -4px 8px 0px rgba(0, 0, 0, 0.1);

    .caret {
      z-index: 93;
      position: absolute;
      top: calc(100% - 24px);
      border: base(0.4) solid transparent;
      pointer-events: none;
      border-top-color: var(--theme-input-bg);
    }

    &__group {
      display: flex;
      align-items: center;
      gap: 2px;

      .icon {
        min-width: 20px;
        height: 20px;
        color: var(--theme-elevation-600);
      }

      .divider {
        width: 1px;
        height: 15px;
        background-color: var(--theme-border-color);
        margin: 0 6.25px;
      }
    }
  }
  html[data-theme='light'] {
    .inline-toolbar-popup {
      box-shadow:
        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    }
  }
}
