.tooltip-box{display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tooltip-box__message{border:1px solid var(--color-beige-light);border-radius:4px;color:var(--color-text-brown);font-size:14px;padding:2px 8px;pointer-events:none;white-space:nowrap;z-index:10}.tooltip-box__message,.tooltip-box__message:after{background-color:var(--color-text-beige);position:absolute}.tooltip-box__message:after{border:1px solid var(--color-beige-light);content:"";height:10px;transform:rotate(45deg);width:10px}.tooltip-box__message--top{bottom:100%;left:50%;margin-bottom:10px;transform:translate(-50%)}.tooltip-box__message--top:after{border-left:none;border-top:none;left:50%;top:calc(100% - 4px);transform:translate(-50%) rotate(45deg)}.tooltip-box__message--bottom{left:50%;margin-top:10px;top:100%;transform:translate(-50%)}.tooltip-box__message--bottom:after{border-bottom:none;border-right:none;bottom:calc(100% - 4px);left:50%;transform:translate(-50%) rotate(45deg)}.tooltip-box__message--top-left{bottom:100%;left:0;margin-bottom:10px;transform:translate(0)}.tooltip-box__message--top-left:after{border-left:none;border-top:none;left:10px;top:calc(100% - 4px);transform:rotate(45deg)}.tooltip-box__message--top-right{bottom:100%;margin-bottom:10px;right:0;transform:translate(0)}.tooltip-box__message--top-right:after{border-left:none;border-top:none;right:10px;top:calc(100% - 4px);transform:rotate(45deg)}.tooltip-box__message--bottom-left{left:0;margin-top:10px;top:100%;transform:translate(0)}.tooltip-box__message--bottom-left:after{border-bottom:none;border-right:none;bottom:calc(100% - 4px);left:10px;transform:rotate(45deg)}.tooltip-box__message--bottom-right{margin-top:10px;right:0;top:100%;transform:translate(0)}.tooltip-box__message--bottom-right:after{border-bottom:none;border-right:none;bottom:calc(100% - 4px);right:10px;transform:rotate(45deg)}