@import "./theme.css";

.react-aria-ToggleButtonGroup {
  display: flex;

  > .react-aria-ToggleButton {
    z-index: 1;

    > span {
      transition: scale 200ms;
    }

    &[data-pressed] {
      scale: 1;

      > span {
        scale: 0.9;
      }
    }

    &[data-disabled] {
      z-index: 0;
    }

    &[data-selected],
    &[data-focus-visible] {
      z-index: 2;
    }
  }
}

.react-aria-ToggleButtonGroup[data-orientation=horizontal] {
  flex-direction: row;

  > .react-aria-ToggleButton {
    margin-inline-start: -1px;
    border-radius: 0;

    &:first-child {
      border-radius: var(--radius) 0 0 var(--radius);
      margin-inline-start: 0;
    }

    &:last-child {
      border-radius: 0 var(--radius) var(--radius) 0;
    }
  }
}

.react-aria-ToggleButtonGroup[data-orientation=vertical] {
  flex-direction: column;
  width: fit-content;

  > .react-aria-ToggleButton {
    margin-block-start: -1px;
    border-radius: 0;

    &:first-child {
      border-radius: var(--radius) var(--radius) 0 0;
      margin-block-start: 0;
    }

    &:last-child {
      border-radius: 0 0 var(--radius) var(--radius);
    }
  }
}
