/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

.c-arrow{
  position:relative;
}

.c-arrow:before{
  border:inherit;
  border-color:transparent;
  background-clip:content-box;
}

.c-arrow:after{
  z-index:-1;
  border:inherit;
  box-shadow:inherit;
}

.c-arrow:after,.c-arrow:before{
  position:absolute;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
  background-color:inherit;
  box-sizing:inherit;
  width:.85714em;
  height:.85714em;
  content:"";
}

.c-arrow--t:before,.c-arrow--tl:before,.c-arrow--tr:before{
  border-bottom-right-radius:100%;
  -webkit-clip-path:polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0);
          clip-path:polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0);
}

.c-arrow--t:after,.c-arrow--t:before{
  top:-.42857em;
  left:50%;
  margin-left:-.42857em;
}

.c-arrow--tl:after,.c-arrow--tl:before{
  top:-.42857em;
  left:.85714em;
}

.c-arrow--tr:after,.c-arrow--tr:before{
  top:-.42857em;
  right:.85714em;
}

.c-arrow--r:before,.c-arrow--rb:before,.c-arrow--rt:before{
  border-bottom-left-radius:100%;
  -webkit-clip-path:polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0);
          clip-path:polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0);
}

.c-arrow--rt:after,.c-arrow--rt:before{
  top:.85714em;
  right:-.42857em;
}

.c-arrow--r:after,.c-arrow--r:before{
  top:50%;
  right:-.42857em;
  margin-top:-.42857em;
}

.c-arrow--rb:after,.c-arrow--rb:before{
  right:-.42857em;
  bottom:.85714em;
}

.c-arrow--l:before,.c-arrow--lb:before,.c-arrow--lt:before{
  border-top-right-radius:100%;
  -webkit-clip-path:polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0);
          clip-path:polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0);
}

.c-arrow--lt:after,.c-arrow--lt:before{
  top:.85714em;
  left:-.42857em;
}

.c-arrow--l:after,.c-arrow--l:before{
  top:50%;
  left:-.42857em;
  margin-top:-.42857em;
}

.c-arrow--lb:after,.c-arrow--lb:before{
  bottom:.85714em;
  left:-.42857em;
}

.c-arrow--b:before,.c-arrow--bl:before,.c-arrow--br:before{
  border-top-left-radius:100%;
  -webkit-clip-path:polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%);
          clip-path:polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%);
}

.c-arrow--b:after,.c-arrow--b:before{
  bottom:-.42857em;
  left:50%;
  margin-left:-.42857em;
}

.c-arrow--bl:after,.c-arrow--bl:before{
  bottom:-.42857em;
  left:.85714em;
}

.c-arrow--br:after,.c-arrow--br:before{
  right:.85714em;
  bottom:-.42857em;
}