@use './colors';

@mixin all {
  .seam-menu-bg {
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
  }

  .seam-menu-hidden {
    display: none;
  }

  .seam-menu-visible {
    display: flex;
  }

  .seam-menu-content {
    width: 250px;
    position: absolute;
    padding: 8px 0;
    background: colors.$white;
    box-shadow:
      0 0 1px rgb(0 0 0 / 30%),
      0 2px 16px 2px rgb(15 22 28 / 15%);
    border-radius: 8px;

    .seam-menu-item {
      padding: 0 16px;
      height: 36px;
      display: flex;
      align-items: center;
      font-size: 16px;
      line-height: 134%;
      cursor: pointer;

      &:hover {
        background: colors.$item-hover-bg;
      }
    }

    .seam-divider {
      height: 1px;
      background: colors.$divider-stroke-light;
      margin: 8px 0;
    }
  }

  .seam-menu-shadow {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    top: 0;
    right: 0;
    position: fixed;
  }
}