@import '@zendeskgarden/css-variables';

:root {
  --zd-dialog__close-background-image: svg-load('16/x-stroke.svg', color: var(--zd-color-grey-600));
  --zd-dialog__close-right: 20px;
  --zd-dialog__close-size: 40px;
  --zd-dialog__close-top: 10px;
  --zd-dialog__close-transition: background-color .1s ease-in-out;
  --zd-dialog__close-hovered-background-image: svg-load('16/x-stroke.svg', color: var(--zd-color-grey-800));
  --zd-dialog__close-focused-background-color: color-mod(var(--zd-color-grey-600) alpha(15%));
  --zd-dialog__close__icon-background-size: 16px;
  --zd-dialog__close__icon-transition: opacity .25s ease-in-out;
}

/* 1. Reset for <button> element.
 * 2. Reset for <a>nchor element.
 * 3. Reset for FF.
 */
.c-dialog__close {
  display: block;
  position: absolute;
  top: var(--zd-dialog__close-top);
  right: var(--zd-dialog__close-right);
  transition: var(--zd-dialog__close-transition);
  border: none; /* [1] */
  border-radius: 50%;
  background-color: transparent; /* [1] */
  cursor: pointer;
  width: var(--zd-dialog__close-size);
  height: var(--zd-dialog__close-size);
  overflow: hidden;
  text-decoration: none; /* [2] */
  font-size: 0; /* [2] */
  user-select: none;
}

.c-dialog__close::-moz-focus-inner {
  border: 0; /* [3] */
}

.c-dialog__close::before,
.c-dialog__close::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: var(--zd-dialog__close__icon-transition);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--zd-dialog__close__icon-background-size);
  content: '';
}

.c-dialog__close::before {
  opacity: 1;
  background-image: var(--zd-dialog__close-background-image);
}

.c-dialog__close::after {
  opacity: 0;
  background-image: var(--zd-dialog__close-hovered-background-image);
}

@custom-selector :--dialog-hovered
  .is-hovered,
  .is-focused,
  :hover;

.c-dialog__close:--dialog-hovered::before {
  opacity: 0;
}

.c-dialog__close:--dialog-hovered::after {
  opacity: 1;
}

@custom-selector :--dialog-focused
  .is-focused,
  :focus;

.c-dialog__close:--dialog-focused {
  outline: none;
  background-color: var(--zd-dialog__close-focused-background-color);
}

@custom-selector :--dialog-active
  .is-active,
  :active;

.c-dialog__close:--dialog-active {
  background-color: transparent;
}

.c-dialog.is-rtl .c-dialog__close {
  right: auto;
  left: var(--zd-dialog__close-right);
}