/**
* @component editable-textfield
*/

@import '../settings/colors.scss';
@import '../settings/core.scss';
@import '../settings/inputs';
@import '../tools/functions/core';
@import '../tools/mixins/core';

@include exports('cui-editable-textfield') {
  .#{$prefix}-editable-textfield {

    & > &__button {
      @include radius($global-radius);

      padding: $input__padding;

      &:hover,
      &:active {
        background-color: $black-16;

        .#{$dark-class} & {
          background-color: $white-24;
        }
      }
    }

    & > &__editing {
      @include radius($global-radius);

      margin-bottom: 0;

      .#{$input__class} {
        height: auto;
        padding:  $input__padding;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        transition: none;
      }
    }

    &--left {
      & > .#{$prefix}-editable-textfield__button {
        text-align: left;
      }

      .#{$input__class} {
        text-align: left;
      }
    }

    &--center {
      & > .#{$prefix}-editable-textfield__button {
        text-align: center;
      }

      .#{$input__class} {
        text-align: center;
      }
    }

    &--right {
      & > .#{$prefix}-editable-textfield__button {
        text-align: right;
      }

      .#{$input__class} {
        text-align: right;
      }
    }
  }
}

/**
* @section default
* @component editable-textfield
* @html
  <!-- unfocussed state -->
  <span class="cui-editable-textfield cui-editable-textfield--left">
    <div role="button" class="cui-editable-textfield__button">Hello World</div>
  </span>
  <!-- button div is replaced by input when focused -->
  <span class="cui-editable-textfield cui-editable-textfield--left">
    <div class="cui-input-group cui-editable-textfield__editing">
      <input class="cui-input" type="text" value="Hello World">
    </div>
  </span>
*/