<template>
  <div class="controls">
    <div v-if="name != null" class="name censor">{{ name }}</div>

    <div class="buttons">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped>
.button {
  background: grey;
  color: white;
  border: none;
  outline: none;
  font-size: 15px;
}

.button:hover {
  background: var(--accent);
  outline: none;
}

.controls,
.buttons {
  display: flex;
  align-items: center;
}
.buttons > * {
  margin-right: 3px;
  margin-top: 5px;
}

.controls {
  justify-content: space-between;
}

</style>