@use '../../internals/Box/styles/index' as box;
@use '../../styles/colors/colors-base' as colors;
@use '../../Input/styles/index' as input;

.rs-inline-edit {
  $sizes: xs, sm, md, lg;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      --rs-inline-edit-font-size: var(--rs-input-font-size-#{$size});
      --rs-inline-edit-line-height: var(--rs-input-line-height-#{$size});
      --rs-inline-edit-padding-block: calc(var(--rs-input-padding-block-#{$size}) + var(--rs-input-border-width));
      --rs-inline-edit-padding-inline: calc(var(--rs-input-padding-inline-#{$size}) + var(--rs-input-border-width));
    }
  }

  position: relative;
  display: inline-block;

  .rs-plaintext {
    font-size: var(--rs-inline-edit-font-size);
    line-height: var(--rs-inline-edit-line-height);
    padding-block: var(--rs-inline-edit-padding-block);
    padding-inline: var(--rs-inline-edit-padding-inline);
    border-radius: var(--rs-radius-md);

    &:hover {
      background-color: var(--rs-inline-edit-hover-bg);
    }
  }

  &[data-disabled='true'] {
    .rs-plaintext {
      &:hover {
        background-color: transparent;
      }
    }
  }

  &-controls {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0px;
    margin-block-start: 6px;
    z-index: 7;

    .rs-btn {
      box-shadow: var(--rs-shadow-sm);
    }
  }
}