@import (reference) '../../styles/variables.less';

.@{prefix}-source-code-editor {
  position: relative;

  &-textarea {
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    caret-color: @c-text;
    overflow-wrap: normal;
    white-space: pre;
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    border: 0;
    resize: none;
    outline: none;
    overflow: hidden;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    @{dark-selector} & {
      caret-color: @c-text-dark;
    }

    &:focus {
      @{dark-selector} & {
        // for firefox because its selection color is not translucent when color-scheme is dark
        &::selection {
          background-color: fade(@c-primary-dark, 30%);
        }
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    pointer-events: none;
  }

  &:focus-within {
    &::after {
      box-shadow: 0 0 0 1px @c-primary inset;

      @{dark-selector} & {
        box-shadow: 0 0 0 1px @c-primary-dark inset;
      }
    }
  }
}