@import '../../../scss/settings/variables';

$color-comment-separator: theme('colors.border-furniture');

$color-box-background: theme('colors.surface-page');
$color-box-background-focused: theme('colors.surface-page');
$color-box-border: theme('colors.border-furniture');
$color-box-border-focused: theme('colors.border-field-hover');
$color-box-text: theme('colors.text-context');
$box-border-radius: 5px;
$box-padding: 20px;

@mixin focus-outline {
  outline: theme('colors.focus') solid 3px;
}

@mixin box {
  background-color: $color-box-background;
  padding: $box-padding;
  border-radius: $box-border-radius;
  color: $color-box-text;
  border: 1px solid $color-box-border;

  &--focused {
    background-color: $color-box-background-focused;
    border: 1px solid $color-box-border-focused;
    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
  }

  textarea {
    margin: 0;
    padding: 12px;
    width: 100%;
    background-color: theme('colors.surface-field');
    border: 1px solid theme('colors.border-field-default');
    border-radius: 5px;
    color: $color-box-text;

    &::placeholder {
      color: theme('colors.text-placeholder');
      opacity: 1;
    }
  }

  *:focus {
    @include focus-outline;
  }

  &__notice-placeholder {
    position: relative;
    padding-bottom: 40px;
  }

  &__notice {
    background-color: theme('colors.warning.50');
    color: theme('colors.grey.600');
    position: absolute;
    inset-inline-start: -$box-padding;
    bottom: 0;
    width: calc(100% + #{$box-padding} * 2);
    padding: 5px 10px;

    svg.icon {
      color: theme('colors.warning.100');
      width: 14px;
      height: 14px;
      margin-inline-end: 10px;
      vertical-align: text-bottom;
    }
  }

  & > &__notice-placeholder:last-child &__notice,
  &__replies:last-child > :last-child &__notice {
    border-end-start-radius: $box-border-radius;
    border-end-end-radius: $box-border-radius;
  }
}

@mixin button {
  background-color: inherit;
  border: 1px solid theme('colors.border-button-small-outline-default');
  border-radius: 3px;
  color: theme('colors.surface-button-default');
  cursor: pointer;
  font-weight: 700;
  height: 30px;
  padding-inline-start: 10px;
  padding-inline-end: 10px;

  &--primary {
    color: theme('colors.text-button');
    border: 1px solid theme('colors.surface-button-default');
    background-color: theme('colors.surface-button-default');
  }

  &--red {
    color: theme('colors.text-button');
    border: 1px solid theme('colors.critical.200');
    background-color: theme('colors.critical.200');
  }

  &:disabled {
    opacity: 0.3;
  }

  // Disable Firefox's focus styling because we add our own.
  &::-moz-focus-inner {
    border: 0;
  }
}

.comments-list {
  position: relative;
  top: 20px;
  inset-inline-end: 20px;
  z-index: calc(theme('zIndex.header') + 5);
}

// stylelint-disable no-invalid-position-at-import-rule
@import 'components/CommentHeader/style';
@import 'components/Comment/style';
@import 'components/CommentReply/style';
