@import url("../index.scss");

.digit-action-bar-wrap {
  @extend .light-text-color-primary;
  @extend .light-paper-primary;
  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
  max-width: 100%;
  z-index: 100;

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

  div {
    @apply w-full;
  }

  .digit-menu-wrap {
    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
    @extend .light-background;
    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;
      @extend .light-primary;

      &:hover {
        @apply bg-grey-mid w-full;
        @extend .light-background;
      }
    }
  }
}

@screen dt {
  .digit-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;
    /* @extend .light-background; */

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

    .digit-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;
          /* @extend .light-background; */
        }
      }
    }
  }
}

.digit-action-bar-wrap-registry {
  div {
    @apply w-full;
  }
  .digit-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;
    @extend .light-background;

    div {
      @apply h-12 pl-sm py-md text-body-l text-text-primary;

      &:hover {
        @apply bg-grey-mid w-full;
        @extend .light-background;
      }
    }
  }

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

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