.sam.menu {
  display: flex;
}

.sam.menu .section.right {
  display: flex;
  overflow: auto;
  box-shadow: inset -7px 0px 15px 0px rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 20px,
    #000 calc(100%),
    transparent
  );
}

.sam.menu .section.right::-webkit-scrollbar {
  display: none;
}

.sam.menu .section.right .sam.button {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 15px;
  padding-right: 15px;
}

// Move this to sam-toolbar component
sam-toolbar sam-actions {
  overflow: hidden;
  flex-grow: 1;
}

@media screen and (min-width: 600px) {
  .sam.menu {
    justify-content: space-between;
  }
  .sam.menu .section.right {
    overflow: visible;
    box-shadow: none;
    mask-image: none;
  }
  sam-toolbar sam-actions {
    overflow: visible;
    flex-grow: 0;
  }
  .sam.menu .section.right .sam.button {
    padding-left: 20px;
    padding-right: 20px;
  }
}