/*!
 * 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-tooltip{
  display:inline-block;
  box-sizing:border-box;
  border-radius:2px;
  box-shadow:0 4px 8px 0 rgba(23, 73, 77, .15);
  background-color:#03363d;
  padding:0 1em;
  line-height:1.66667;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  font-weight:400;
}

.c-tooltip.c-arrow:after,.c-tooltip.c-arrow:before{
  font-size:7px;
}

.c-tooltip--extra-large{
  border-radius:4px;
  padding:40px;
  max-width:460px;
  word-wrap:break-word;
  line-height:1.42857;
  white-space:normal;
  font-size:14px;
}

.c-tooltip--extra-large.c-arrow:after,.c-tooltip--extra-large.c-arrow:before{
  font-size:16px;
}

.c-tooltip--large{
  border-radius:4px;
  padding:20px;
  max-width:270px;
  word-wrap:break-word;
  line-height:1.42857;
  white-space:normal;
  font-size:14px;
}

.c-tooltip--large.c-arrow:after,.c-tooltip--large.c-arrow:before{
  font-size:12px;
}

.c-tooltip--medium{
  border-radius:4px;
  padding:1em;
  max-width:140px;
  word-wrap:break-word;
  line-height:1.33333;
  white-space:normal;
}

.c-tooltip__paragraph{
  margin:0;
}

.c-tooltip__title{
  display:none;
  margin:0;
  font-weight:600;
}

.c-tooltip--large .c-tooltip__paragraph{
  margin-top:8px;
}

.c-tooltip--extra-large .c-tooltip__paragraph{
  margin-top:10px;
}

.c-tooltip--extra-large .c-tooltip__title,.c-tooltip--large .c-tooltip__title{
  display:block;
}

.c-tooltip.is-rtl{
  direction:rtl;
}

.c-tooltip--light{
  border:1px solid #d8dcde;
  box-shadow:0 12px 20px 0 rgba(23, 73, 77, .15);
  background-color:#fff;
  color:#49545c;
}

.c-tooltip--light.c-arrow:after,.c-tooltip--light.c-arrow:before{
  font-size:9px;
}

.c-tooltip--light.c-tooltip--large.c-arrow:after,.c-tooltip--light.c-tooltip--large.c-arrow:before{
  font-size:14px;
}

.c-tooltip--light.c-tooltip--extra-large.c-arrow:after,.c-tooltip--light.c-tooltip--extra-large.c-arrow:before{
  font-size:18px;
}

.c-tooltip--light .c-tooltip__title{
  color:#2f3941;
}
