.action-bar-wrap {
  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
  max-width: 480px;
  z-index: 100;

  @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right;

  div {
    @apply w-full;
  }
  .menu-wrap {
    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
    bottom: 45px;
    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
    width: calc(100% - 16px);
    right: 8px;
  
    div {
      @apply h-12 pl-sm py-md text-body-l text-text-primary;
  
      &:hover {
        @apply bg-grey-mid w-full;
      }
    }
  }
}

@screen dt {
  .action-bar-wrap {
    box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
    left: 0;
    max-width: none;
    z-index: 999;

    @apply fixed bottom-0 bg-white py-sm pr-lg text-right;

    div {
      width: calc(100% - 16px);
    }

    .menu-wrap {
      bottom: 45px;
      top: unset;
      box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
      @apply absolute h-auto bg-white text-left mb-xs z-30;
      width: 240px;
      right: 24px;
  
      div {
        @apply h-12 pl-sm py-md text-body-l text-text-primary;
  
        &:hover {
          @apply bg-grey-mid w-full;
        }
      }
    }
  }
}

.action-bar-wrap-registry {

  div {
    @apply w-full;
  }
  .menu-wrap {
    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
    width: 160px;
    right: 60px;
  
    div {
      @apply h-12 pl-sm py-md text-body-l text-text-primary;
  
      &:hover {
        @apply bg-grey-mid w-full;
      }
    }
  }

  .search-add {
    padding: 12px 16px;
    color: rgb(244, 119, 56);
    display: flex;
    cursor: pointer;
  }

  .search-add-icon {
    background: rgb(244, 119, 56);
    border-radius: 50%;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
}