@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(popover) {
  border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
  background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
  border-color: getCssVarWebex('outline', 'secondary', 'normal');
  color: getCssVarWebex('text', 'primary', 'normal');
  padding: var(--mds-spacing-core-x-small);
  &[x-placement^="top"] .popper__arrow {
    border-top-color: getCssVarWebex('outline', 'secondary', 'normal');
    &::after {
      border-top-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    }
  }
  &[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: getCssVarWebex('outline', 'secondary', 'normal');
    &::after {
      border-bottom-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    }
  }
  &[x-placement^="left"] .popper__arrow {
    border-left-color: getCssVarWebex('outline', 'secondary', 'normal');
    &::after {
      border-left-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    }
  }
  &[x-placement^="right"] .popper__arrow {
    border-right-color: getCssVarWebex('outline', 'secondary', 'normal');
    &::after {
      border-right-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    }
  }
  &.is-dark {
    background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    border-color: getCssVarWebex('outline', 'secondary', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    a {
      color: getCssVarWebex('text', 'accent', 'normal');
    }
    .el-popover__title{
      color: getCssVarWebex('text', 'primary', 'normal');
    }
    &[x-placement^="top"] .popper__arrow {
      border-top-color: getCssVarWebex('outline', 'secondary', 'normal');
      &::after {
        border-top-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      }
    }
    &[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: getCssVarWebex('outline', 'secondary', 'normal');
      &::after {
        border-bottom-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      }
    }
    &[x-placement^="left"] .popper__arrow {
      border-left-color: getCssVarWebex('outline', 'secondary', 'normal');
      &::after {
        border-left-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      }
    }
    &[x-placement^="right"] .popper__arrow {
      border-right-color: getCssVarWebex('outline', 'secondary', 'normal');
      &::after {
        border-right-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
      }
    }
  }
}

