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

$pop-up-arrow-extrusion: -7px;

.container {
  @include boxSizing;

  min-height: 50px;
  display: grid;
  grid: min-content 1fr / 1fr;

  background-color: white;

  box-shadow: 0px 1px 8px 3px rgba(92, 92, 92, 0.27);

  z-index: 9999;

  .arrow,
  .arrow::before {
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
  }

  .arrow {
    z-index: -1;
    visibility: hidden;

    background-color: white;
  }

  .arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  :global {
    .actions-container {
      .action-container {
        height: 50px;
        grid-template-columns: 1fr 50px;
        span {
          padding-left: 15px;
          padding-right: 15px;
          font-size: 16px;
        }

        svg {
          height: 25px;
          padding-right: 0;
          display: flex;
          justify-self: center;
        }
      }
    }
  }

  &[data-popper-placement^='top'] {
    > .arrow {
      bottom: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='bottom'] {
    > .arrow {
      top: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='left'] {
    > .arrow {
      right: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='right'] {
    > .arrow {
      left: $pop-up-arrow-extrusion;
    }
  }
}

.buttonDefault {
  background-color: transparent !important;
  svg * {
    stroke: var(
      --inline-menu-button-stroke-color,
      $inline-menu-button-stroke-color
    ) !important;
  }
  &:hover {
    background-color: var(
      --inline-menu-button-hover-bg-color,
      $inline-menu-button-hover-bg-color
    ) !important;
    svg * {
      stroke: white !important;
    }
  }
}

.buttonDefaultOpacity {
  background-color: color-mix(in srgb, white 70%, transparent) !important;
  svg * {
    stroke: var(
      --inline-menu-button-stroke-color,
      $inline-menu-button-stroke-color
    ) !important;
  }
  &:hover {
    background-color: var(
      --inline-menu-button-hover-bg-color,
      $inline-menu-button-hover-bg-color
    ) !important;
    svg * {
      stroke: white !important;
    }
  }
}

.buttonSelected {
  background-color: var(
    --inline-menu-button-selected-bg-color,
    $inline-menu-button-selected-bg-color
  ) !important;
  svg * {
    stroke: white !important;
  }
}
