/**
  close buttons constructs a css close button when used in an element that provides the following markup

  <span part="close"></span>

  This file needs to be removed once https://git.sami.int.thomsonreuters.com/elf/elf-theme-elemental/issues/1
  is satisfied

 */
.close-button (@size) {
  [part='close'] {
    display: block;
    width: @size;
    height: @size;
    transform: rotate(45deg);
    background-color: inherit;
    box-shadow: inset 0 0 0 100vw currentColor;
    overflow: hidden;
    backface-visibility: hidden;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;

    &:active {
      border: 1px solid transparent;
    }
  }
  [part='close']::before,
  [part='close']::after {
    position: absolute;
    content: '';
    background-color: inherit;
    top: 50%;
    left: 50%;
  }
  [part='close']::before {
    width: 10%;
    min-width: 1px;
    margin-left: -5%;
    margin-top: -35%;
    height: 70%;
  }
  [part='close']::after {
    height: 10%;
    min-height: 1px;
    margin-top: -5%;
    width: 70%;
    margin-left: -35%;
  }
}