ujiro99/tlt

.ButtonGroup {
  --width: 7rem;
  --height: 2.4rem;
  --border: 2px;
  --radius: 8px;

  display: inline-block;
  height: var(--height);
  user-select: none;
  margin-top: 1rem;

  .wrapper {
    display: inline-flex;
    position: relative;
    border: solid var(--border) transparent;
    border-bottom: none;
    height: var(--height);
  }

  .button {
    position: relative;
    width: var(--width);
    height: calc(var(--height) - var(--border));
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .icon {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    @apply fill-gray-600;
  }

  .label {
    @apply text-gray-600;
    @apply font-medium;
    margin-left: 6px;
    margin-right: 6px;
    font-size: 14px;
  }

  .bgWrapper {
    position: absolute;
  }

  .bg {
    display: inline-block;
    width: var(--width);
    height: calc(var(--height) - var(--border));
    background-color: rgb(229 231 235);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .selectedBg {
    width: var(--width);
    height: calc(var(--height) - var(--border));
    position: absolute;
    user-select: none;
    background-color: #fff;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);

    @apply transition;
    @apply transition-[left];
    @apply duration-150;
    @apply ease-out;
  }
}