/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './token-utils' as *;
@use '../button';
@use '../icon-button';
@use '../focus-indicator';

//
// Host
//

:host {
  @include tokens;

  #{declare(focus-indicator-offset-adjusted)}: calc(#{token(focus-indicator-offset)} + #{token(focus-indicator-divider-offset)} * 2);
}

:host {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

:host([hidden]) {
  display: none;
}

//
// Button overrides
//

::slotted(*) {
  @include button.provide-theme((
    min-width: #{token(min-width)},
    focus-indicator-offset: #{token(focus-indicator-offset)}
  ));
}

::slotted(:first-child) {
  @include button.provide-theme((
    shape-start-end-radius: 0,
    shape-end-end-radius: 0
  ));

  @include focus-indicator.provide-theme((
    shape-start-end: 0,
    shape-end-end: 0,
    offset-inline: 0 #{token(focus-indicator-offset-adjusted, custom)}
  ));
}

::slotted(:not(:first-child):not(:last-child)) {
  @include button.provide-theme(( shape: 0 ));

  @include focus-indicator.provide-theme((
    shape: 0,
    offset-inline: #{token(focus-indicator-offset-adjusted, custom)}
  ));
}

::slotted(:last-child) {
  @include button.provide-theme((
    shape-start-start-radius: 0,
    shape-end-start-radius: 0
  ));

  @include focus-indicator.provide-theme((
    shape-start-start: 0,
    shape-end-start: 0,
    offset-inline: #{token(focus-indicator-offset-adjusted, custom)} 0
  ));
}


//
// Outlined
//

:host([variant=outlined]) {
  ::slotted(:not(:first-child)) {
    margin-inline-start: calc(-1 * #{token(gap)});
  }

  @include override(focus-indicator-divider-offset, 0px, value); // Required unit
}

//
// Tonal, Filled, and Raised
//

:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) {
  ::slotted(:not(:last-child)) {
    margin-inline-end: #{token(gap)};
  }
}
