//
// Copyright IBM Corp. 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/ibm-products-styles/scss/config';
@use '@carbon/ibm-products-styles/scss/components/Coachmark/_coachmark-beacon';

$prefix: config.$pkg-prefix;
$carbon-prefix: config.$carbon-prefix;

$block-class: #{$prefix}--coachmark-beacon;

:host(#{$prefix}-coachmark-beacon) {
  position: relative;
}

:host(.#{$prefix}--coachmark-beacon-default) {
  .#{$block-class}__target {
    &::before {
      display: none;
    }
    // the blue dot
    &::after {
      position: absolute;
      border-radius: 50%;
      /* stylelint-disable-next-line carbon/theme-use */
      background-color: $blue-50;
      block-size: $spacing-04;
      content: '';
      inline-size: $spacing-04;
      inset-block-start: calc($spacing-01 + $spacing-03);
      inset-inline-start: calc($spacing-01 + $spacing-03);
    }

    &:focus {
      outline: transparent;

      &::before {
        position: absolute;
        display: block;
        border-radius: 100%;
        block-size: 18px;
        content: '';
        inline-size: 18px;
        inset-block-start: 7px;
        inset-inline-start: 7px;
        /* stylelint-disable-next-line carbon/theme-use */
        outline: $spacing-01 $focus solid;
      }
    }
  }

  .#{$block-class}__target {
    display: flex;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    block-size: $spacing-07;
    box-shadow: none;
    cursor: pointer;
    inline-size: $spacing-07;

    &[aria-expanded='true'] {
      circle {
        animation: none;
      }
    }
  }

  .#{$block-class}__target::part(button) {
    background-color: transparent;
    box-shadow: none;
    max-block-size: 0;
    min-block-size: 0;
    padding-inline: 0;

    &:focus {
      border-color: transparent;
      box-shadow: none;
    }
  }
}