@use '../../Button/styles/index';
@use '../../Button/styles/mixin' as btn-mixin;

//
// IconButton
// --------------------------------------------------
.rs-btn-icon {
  padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
  line-height: var(--rs-btn-icon-size);

  > .rs-icon {
    font-size: var(--rs-btn-icon-size);
    vertical-align: bottom;
  }

  &:not([data-with-text]) {
    width: var(--rs-btn-size);
  }

  // Circle Button
  &[data-shape='circle'] {
    border-radius: var(--rs-radius-full);
  }
}

// Icon Button with text
@mixin btn-icon-with-text($bg) {
  > .rs-icon {
    background-color: $bg;
  }
}

// Only support default/primary button
.rs-btn-icon[data-with-text] {
  > .rs-icon {
    position: absolute;
    top: 0;
    display: block;
    background-color: var(--rs-iconbtn-addon);
    transition: var(--rs-btn-transition);
    width: var(--rs-btn-size);
    height: var(--rs-btn-size);
    padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
  }

  &:where([data-placement='start'], [data-placement='left']) {
    padding-inline-start: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));

    > .rs-icon {
      inset-inline-start: 0;
      border-right-width: 1px;
    }
  }

  &:where([data-placement='end'], [data-placement='right']) {
    padding-inline-end: calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));

    > .rs-icon {
      inset-inline-end: 0;
    }
  }

  @include btn-mixin.button-activated {
    @include btn-icon-with-text(var(--rs-iconbtn-activated-addon));
  }

  @include btn-mixin.button-pressed {
    @include btn-icon-with-text(var(--rs-iconbtn-pressed-addon));
  }

  @include btn-mixin.button-disabled {
    @include btn-icon-with-text(var(--rs-iconbtn-addon));
  }
}

.rs-btn-icon[data-with-text][data-appearance='primary'] {
  @include btn-icon-with-text(var(--rs-iconbtn-primary-addon));

  @include btn-mixin.button-activated {
    @include btn-icon-with-text(var(--rs-iconbtn-primary-activated-addon));
  }

  @include btn-mixin.button-pressed {
    @include btn-icon-with-text(var(--rs-iconbtn-primary-pressed-addon));
  }

  @include btn-mixin.button-disabled {
    @include btn-icon-with-text(var(--rs-iconbtn-primary-addon));
  }
}